React Native ListView 不一致的分隔线答案

【问题标题】：ReactNative ListView inconsistent separator linesReact Native ListView 不一致的分隔线
【发布时间】：2016-06-24 11:28:39
【问题描述】：

在 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 设备（在 android 模拟器中）上运行时，它会在所有 API 版本上发生

【问题讨论】：

这是缩放问题吗？它发生在真实设备上吗？我之前在 iOS 模拟器上遇到过这个问题。
这已经被用户报告（发生在设备上），我已经在模拟器上复制了它..
我已经解决了渲染单独separator 视图的需要，将每行的bottomBorderWidth 设置为1px。你试过吗？
bottomBorderWidth 问题仍然存在。看起来行元素之间的间距不一致。

标签： react-native react-native-listview react-native-android

【解决方案1】：

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

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

【讨论】：

我在 FlatList 内部的本机基础 ListItem 组件中使用相同的解决方案进行了修复，只是添加了 marginBottomWidth = borderBottomWidth，在我的情况下为 1 / PixelRatio.getPixelSizeForLayoutSize(1)。在 react-native=0.57.8, android.

【解决方案2】：

只需在样式中给出高度：hairlineWidth

【讨论】：

"StyleSheet.hairlineWidth" 更具体。
这实际上并不能解决问题。也不会在项目本身上设置边框。
嗨@Giannis你找到任何解决方案了吗？我也遇到了同样的问题，请问有什么解决办法吗？

【解决方案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)' }} />
    );
}

【讨论】：

【解决方案4】：

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

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

Style.listView: { 背景颜色：'#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，但这不是必须的。

【讨论】：

我在哪里可以获得更多关于 RN "render-canvas-bug" 的信息？

【解决方案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>}
          />

看起来不错：

【讨论】：

【解决方案6】：

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

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

【讨论】：

不，这是渲染问题。

【解决方案7】：

我在尝试渲染宽度为 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 }} ... />
}

【讨论】：