react-native - ReactNative ListView 不一致的分隔线

Question

在 Android 4.4 上，ListView 分隔线粗细不一致，有的不渲染。我看不出这怎么可能是代码问题，这就是我渲染它们的方式：

     separator: {
        height: 1,
        backgroundColor: 'grey',
      }
      ...
      <ListView
      renderSeparator={(sectionID, rowID) =>
        <View key={`${sectionID}-${rowID}`} style={styles.separator} />
      }
      .../>

这是有此问题的视图的屏幕截图：

此问题在 iOS 或 Android 6 上不会发生。

以前有人遇到过这个问题吗？

更新

我做了一个测试，这不是Android4的问题。在 Nexus One 设备上运行时，所有 API 版本都会发生这种情况（在 android 模拟器中）

Answer 1

我在 iOS 上遇到了这个问题，并通过添加细线边距来解决它，如下所示：

<View
    style={{
      ...styles,
      borderWidth: StyleSheet.hairlineWidth,
      margin: StyleSheet.hairlineWidth,
    }}
>
    {// ...row content}
</View>

Answer 2

只需给出高度：hairlineWidth风格

Answer 3

正如一些人之前所说，我遇到了同样的问题并解决了将视图高度从数字更改为 StyleSheet.hairlineWidth 的问题。试图更直观/具体：

前：

renderItemSeparator() {
    return (
        <View style={{ height: .2, backgroundColor: 'rgba(0,0,0,0.3)' }} />
    );
}

后：

renderItemSeparator() {
    return (
        <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: 'rgba(0,0,0,0.3)' }} />
    );
}

Answer 4

实际上没有修复。这是 RN“渲染画布错误”。但我找到了黑客解决方案。

<ListView
    style={Style.listView}
    dataSource={data}
    renderRow={(data) => this._renderRow(data)}
    />`

Style.listView: { backgroundColor: '#fff', }, // 或您需要的其他背景颜色

然后：

_renderRow(goods) {

    return (
        <View key={'goods_' + goods.id} style={Style.listView_item}>
            <TouchableOpacity or View or ...
                style={[Style.flex, Style.flexRow, Style.separatorRow, Style.u_paddingVerticalS, Style.u_middle]}
                onPress={() => this._xyz(goods)}>
                <View>
                    <AppFont>{goods.name}</AppFont>
                </View>
            </TouchableOpacity or View or ...>
        </View>
    );
}

唯一重要的 TouchableOpacity 样式是 Style.separatorRow 来呈现您的分隔符。这个样式应该在 listView_item 里面，你可以在其中使用其他样式。

listView: {
    backgroundColor: '#fff',
},
listView_item: {
    paddingHorizontal: em(1.5),
},
flex: {
    flex: 1,
},
flexRow: {
    flexDirection: 'row',
},
separatorRow: {
    marginBottom: 1,
    borderBottomWidth: 1,
    borderBottomColor: Colors.canvasColor,
},

您可以使用 StyleSheet.hairlineWidth 而不是 1 但这不是必须的。

Answer 5

我在GitHub 上报告了

我的解决方法是设置包含视图和文本的样式，如下所示：

const styles = StyleSheet.create({
      rowViewContainer: {
        flex: 1,
        paddingRight: 15,
        paddingTop: 13,
        paddingBottom: 13,
        borderBottomWidth: 0.5,
        borderColor: '#c9c9c9',
        flexDirection: 'row',
        alignItems: 'center',
      },
      rowText: {
        marginLeft: 15,
      },
    });

这是列表视图：

<ListView
            dataSource={this.state.dataSource}
             renderRow={(data) => <View style={styles.rowViewContainer}>
               <Text style={styles.rowText}>
                 {data.bb_first_name}
               </Text>
             </View>}
          />

看起来不错：

Answer 6

在尝试渲染宽度为 0.5 的 Divider 时，我遇到了同样的问题。

它在像素比为 2 的设备（例如 iPhone SE 2nd gen.）上正确渲染，但在像素比为 3 的设备（例如 iPhone 12）上呈现随机宽度。

正如其他答案所建议的那样，使用Stylesheet.hairlineWidth修复了随机宽度问题，但问题是在像素比为 3 的设备上宽度小于 0.5。

所以这解决了我的问题：

import { PixelRatio, View } from 'react-native';
...

export const Divider = () => {
  const width = PixelRatio.roundToNearestPixel(0.5);
  ...

  return <View style={{ width }} ... />
}

Answer 7

发生这种情况是因为您的数据源中有空行。您可以设置分隔符的样式以查看它

为避免这种情况，只需过滤您的数据。