React Native ListView第5、6项间出现异常分隔线问题求助

我之前在React Native 0.55.x版本里也碰到过ListView的类似渲染异常，结合你的代码来看，大概率是row的边框渲染精度问题或者ListView复用机制导致的，给你几个可行的解决方案：

方案1：改用官方推荐的FlatList替代ListView #

首先要说明，ListView在React Native 0.43之后就被官方标记为废弃组件了，FlatList是它的替代方案，性能更优且渲染问题更少。你可以直接替换成FlatList，写法几乎一致：

<FlatList
  data={this.state.data} // FlatList直接接收原始数据，无需dataSource
  renderItem={({item, index}) => this._renderView(item, null, index.toString())}
  removeClippedSubviews={false}
/>

然后调整你的_renderView方法适配参数即可，这样能从根源上避免ListView的旧版本bug。

方案2：用ListView的renderSeparator统一渲染分隔线 #

如果因为项目历史原因必须用ListView，不要在每个row里加底部边框，而是用ListView自带的renderSeparator属性来渲染统一的分隔线，这样能避免row高度精度问题导致的异常线：

<ListView
  removeClippedSubviews={false}
  renderRow={this._renderView}
  dataSource={this.state.dataSource}
  // 添加统一分隔线渲染方法
  renderSeparator={(sectionId, rowId) => (
    <View 
      style={{
        height: 1, 
        backgroundColor: '#eee',
        width: '100%'
      }} 
      key={`separator-${sectionId}-${rowId}`}
    />
  )}
/>

同时修改你的_renderView方法，移除row的底部边框：

_renderView(rowData, sid, rowID){ 
  return( 
    <View style={{
      flex: 1, 
      height: window.height*0.12, 
      backgroundColor: 'white', 
      justifyContent: 'center'
      // 移除borderBottom相关样式
    }}> 
      ... 
    </View>
  )
}

方案3：修正row的高度为整数 #

你当前的row高度是window.height*0.12，这可能会得到一个小数像素值，React Native在渲染小数高度的View时，可能出现像素对齐偏差，导致额外的线。可以把高度改成整数：

// 用Math.floor或者Math.round取整，保证高度为整数像素
const rowHeight = Math.floor(window.height * 0.12);
// 然后在style里使用rowHeight
<View style={{
  flex: 1, 
  height: rowHeight, 
  backgroundColor: 'white', 
  justifyContent: 'center',
  borderBottomWidth: 1, 
  borderBottomColor: '#eee'
}}>

方案4：调整removeClippedSubviews属性 #

虽然你设置了removeClippedSubviews={false}，但这个属性在RN 0.55版本里存在一些已知的渲染bug，你可以尝试移除这个属性（默认是true），或者切换为true测试是否能解决问题。

内容的提问来源于stack exchange，提问作者ray