RN listView使用

最新推荐文章于 2022-11-07 10:34:15 发布

阁楼猫

最新推荐文章于 2022-11-07 10:34:15 发布

阅读量3.8k

点赞数

分类专栏： React 文章标签： listview react

本文链接：https://blog.csdn.net/honjane/article/details/52954232

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

RN中的ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性。

  常用的属性：

initialListSize：指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来
dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。

renderRow：渲染某一行，类似于BaseAdapter中的getItem方法。

onEndReached：简单说就是用于分页操作，在安卓中原生开发中，我们需要自己实现相应的方法。

onEndReachedThreshold：调用onEndReached之前的临界值，单位是像素。（默认值为1000）感觉这个1000设置很好，先如今用户不差流量，所以将体验做到最佳才是上上之策。

refreshControl：指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。(该属性是继承与ScrollView)

renderHeader：渲染头部View，类似于安卓ListView中的addHeader.
renderFooter ：渲染底部View，类似listView中的addFooter

renderSectionHeader :会为每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。

<ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow.bind(this)}
      pageSize={3}
      refreshControl={
         <RefreshControl
           onRefresh={this.onRefresh.bind(this)}
           refreshing={this.state.isLoading}
           colors={['#0000ff', '#00ff00', '#ff0000']}
           enabled={true}
           />
       }
      />

定义listView的item：

renderRow(rowData, sectionID, rowID) {
        var _ = this;//这个this是通过上面this.renderRow.bind(this)传递过来的
        let sepraView;
        {/*listView分割线*/}
        //这里没有使用rowData获取length（rowData代表一条数据） 而是_.props.data拿到数据源size
        if (rowID != _.props.data.length - 1) {
            sepraView = <View style={styles.separator}/>
        }
        return (
            rowData?
                <View key={rowID} style={{marginLeft: 20}}>
                    <View style={styles.contentContener}>
                        <Text style={styles.name}>{rowDate.name}</Text>
                        <Text style={styles.fontGray}>{rowData.desc}</Text>
                    </View>
                    {sepraView}
                </View>
                : <View></View>
        )
    }

绑定数据源：
写法基本上是固定没什么可说的

constructor(props) {
        super(props);
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            //this.props.data数据
            dataSource: ds.cloneWithRows(this.props.data),
        };
    }