React Native （三）ListView

最新推荐文章于 2024-08-23 10:00:04 发布

runrun117

最新推荐文章于 2024-08-23 10:00:04 发布

阅读量804

点赞数

分类专栏： Android知识

本文链接：https://blog.csdn.net/runrun117/article/details/79737618

版权

Android知识专栏收录该内容

79 篇文章 2 订阅

订阅专栏

上一篇介绍了React Native页面跳转、传值；本地保存用户信息；还有fetch网络请求。今天来介绍一下ListView列表。

为了显示网上列表信息，RN为我们提供了ListView标签，和Android原生的差不多。首先要定义一行的样式，然后将获取到的网络上的数据放入，最后渲染。

1、设置样式

renderMovie(movie) {//他要绑定this,签名！！！this，不绑定的的时候不知道this是谁
        return (
            <TouchableHighlight  onPress={()=>this.pressRow(movie.number)}>{/*//这个this是之前绑定的*/}//定级一行的事件
                <View style={styles.container} >
                    <View style={styles.rightContainer} >
                        <Text style={styles.title}>{movie.number}</Text>
                        <Text style={styles.year}>{movie.name}</Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

TouchableHighelight是点击这一行时高亮，oPress是点击之后调用的方法。参数movie是在于listview绑定的时候获取的一个数据

pressRow = (a) => {
        global.cqCode = a;//定义id是全局变量
        const { navigate } = this.props.navigation;//跳转页面
        navigate('CheckB',{codeId : a});//页面跳转并向下一个页面传递参数
    }

点击之后将id传入到方法中，并跳转页面。

和android App一样，需要先定义一行的样式。注意this的绑定（this所指的就是直至包含this指针的上层对象.）

this的绑定：

ES6this的绑定有三种：一种是在constructor单独绑定this。第二种是直接在方法使用的第一绑定this，第三种通过特殊的符号来绑定。

这个是第一种，绑定的是TextView中的点击事件，onPress点击后需要找知道this.onclickOne

然后找到了.bind(this)的地方。最后找到方法体

第二种比较简单，直接在onPress中就通过.bind(this)绑定。

第三种。我们长用第三种，即在onPress中调用this.click方法，然后再方法中使用click =()=>{}来定义方法。

定义好了一行数据，再来看看ListView

                <ListView//ListView会安排视图的渲染，只显示当前在屏幕上的那些元素。而那些已经渲染好了但移动到了屏幕之外的元素，则会从原生视图结构中移除（以提高性能）。
                    dataSource = {this.state.dataSource}//接口用来在ListView的整个更新过程中判断哪些数据行发生了变化。
                    //renderRow={this.renderMovie}//规定一行的样式.没有在里面设置绑定事件
                    renderRow={this.renderMovie.bind(this)}//规定一行的样式
                    style={styles.listView}
                />

ListView适于长列表数据，且元素个数可以增删。ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

首先dataSource是设置listview的数据源。renderRow是将刚才定义的一样样式绑定上去。注意组件要bind(this).这时就会将获取的数据传给renderMovie。

this.state.dataSource就是数据源。

2、绑定数据源

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

这里需要在state中定义变量来接收数据源。

constructor(props){
        super(props);
        this.state = {//不参与渲染的状态量，this是指向这个类的实例.里面放要赋值的东西
            dataSource : new ListView.DataSource({
                rowHasChanged:(row1, row2) => row1 !== row2,

// 初始化数据源(rowHasChanged是优化的一种手段，只有当r1 !== r2的时候才会重新渲染)

}), }; }首先在constructor中设置数据源。类型是ListView的DataSource。

rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。

给数据源变量赋值：

this.setState({//利用setState来改变页面
                        dataSource:this.state.dataSource.cloneWithRows(responseData.mobile),
                     
                    });

responseData.mobile是JSON数组的字符串[{'name':'123','age':'12'},{'name':'456','age':'45'}]

ListView.DataSource为ListView组件提供高性能的数据处理和访问。我们需要调用方法从原始输入数据中抽取数据来创建ListView.DataSource对象，并用其进行数据变更的比较。原始输入数据可以是简单的字符串数组，也可以是复杂嵌套的对象——分不同区(section)各自包含若干行(row)数据。

要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法（如果用到了section，则对应cloneWithRowsAndSections方法）。数据源中的数据本身是不可修改的，所以请勿直接尝试修改。clone方法会自动提取新数据并进行逐行对比（使用rowHasChanged方法中的策略），这样ListView就知道哪些行需要重新渲染了。