ReactNative从零到完整项目-如何使用ListView

项目连接： 93Laer/MyDemo
ReactNative使用手册

重点：

• dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。
• renderRow：渲染某一行，类似于BaseAdapter中的getItem方法。

创建dataSource：这部分代码比较固定，且官方希望我们在构造函数中指定ListView的取值策略。在使用dataSource时，我们需要先new一个dataSource对象，形如下。

 // 构造
    constructor(props) {
        super(props);
        // 这里控制当当前这行的数据是否改变
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    }

提示：关于“==”和“===”的区别，可以自行百度

dataSource支持的数据格式：

{ sectionID_1: { rowID_1: rowData1, ... }, ... }
或者：
{ sectionID_1: [ rowData1, rowData2, ... ], ... }
或者：
[ [ rowData1, rowData2, ... ], ... ]

renderRow

 render() {
        return <View style={{flex: 1, paddingTop: 22}}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text style={{height:50,backgroundColor:'olive',margin: 10}}>{rowData}</Text>}
                />
        </View>
    }

完整代码：

/**
 * 创建人：赖天兵
 * 时间： 2018/2/22
 * 简书：https://www.jianshu.com/u/2229fd214880
 * 掘金：https://juejin.im/user/58647e21128fe1006d0f3f3e
 * github：https://github.com/93Laer
 * 描述：
 */
import React,{Component} from 'react'
import { ListView,View,Text} from 'react-native'
export default class ListViewTest extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 这里用来判定当前这行的数据是否改变
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin', 'Jackson', 'Jillian', 'Julie', 'Devin'
            ])
        };
    }
    render() {
        return <View style={{flex: 1, paddingTop: 22}}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text style={{height:50,backgroundColor:'olive',margin: 10}}>{rowData}</Text>}
                />
        </View>
    }
}

喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）