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

Answer 1

只需给出高度：hairlineWidth样式

Answer 2

实际上没有解决方法。这是RN＆＃34; render-canvas-bug＆＃34;。但我找到了黑客解决方案。

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

Style.listView：{ backgroundColor：＆＃39; #ffff＆＃39;， }，//或您需要的其他backgroundColor

然后：

_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 3

我在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：

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

看起来不错：

Answer 4

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

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

Answer 5

我遇到了同样的问题，并解决了将视图高度从数字更改为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 6

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

example

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

Answer 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 }} ... />
}

ReactNative ListView不一致的分隔线

7 个答案: