ReactNative细节汇总

ListView优化技巧

最新推荐文章于 2025-06-09 17:58:20 发布

weixin_33871366

最新推荐文章于 2025-06-09 17:58:20 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/geomen/blog/649781

本文介绍了如何使用React Native中的ListView组件来解决常见的显示问题，包括隐藏顶部空白区域及实现选中状态的高亮显示。通过调整属性automaticallyAdjustContentInsets并利用highlightRow方法，可以显著改善用户体验。

为什么80%的码农都做不了架构师？>>>

ListView

ListView 隐藏上面的空白

<ListView automaticallyAdjustContentInsets={false}></ListView>

ListView 选中状态

<ListView
  renderRow={(rowData, sectionID, rowID, highlightRow) {
    return (
      <View>
        <TouchableOpacity
          onPress={() => highlightRow(sectionID, rowID)
        >
          {row content here}
        </TouchableOpacity>
      </View>
    );
  }}
  renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => {
    return (
      <View
        key={`${sectionID}-${rowID}`}
        style={{
          height: 1,
          backgroundColor: adjacentRowHighlighted ? 'blue' : 'red',
        }} 
      />
    );
  }}
/>

来自：http://stackoverflow.com/questions/36000842/how-do-i-call-highlightrow-of-listview-renderrow

转载于:https://my.oschina.net/geomen/blog/649781