Demo展示
1.gif
实现步骤
对于原生Android来说，数据的列表展示也是用ListView，对于IOS来说，则是用cell来展示列表数据，而在RN中也是用ListView。虽然是不同的平台，但对于列表显示来说，都需要提供数据源，并且还需要创建这个列表控件的对象
准备数据源
ListView显示本地数据，由于数据较多，我们不可能把它写在代码中，所以我们会把它放在一个json文件，然后去读取数据，如下面的Wine.json：
[
{
"image": "one",
"money": "39",
"name": "德国OETTINGER奥丁格大麦啤酒500ml*4罐/组"
},
{
"image": "two",
"money": "40",
"name": "德拉克（Durlacher） 黑啤酒 330ml*6听"
}
...
]
那如何去获取这些数据了？很简单，只需要在代码中引入这个js文件就可以了，如：
var data = require('./Wine.json');
初始化ListView
constructor(props) {
super(props);
//获取ListView数据源
var data = this.props.data;
//创建ListView对象
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
//将数据源与ListView对象进行绑定
dataSource: ds.cloneWithRows(data)
};
}
我是将ListView组件进行了封装，所以需要获取从index.android.js文件中传递过来的数据源。一般的初始化工作都是在一个组件的构造方法来完成的，这是ES6的写法。rowHasChanged: (r1, r2) => r1 !== r2这句代码是用来控制item数据的更新，当且仅当任意两行数据不相等时才去更新数据源。这里是RN中的一个性能优化。
渲染ListView
render() {
return (
<ListView
//数据源就是我们初始化的值
dataSource={this.state.dataSource}
//这是一个ListView中的一个回调方法
renderRow={this.renderRow.bind(this)}
/>
);
}
//我们重写了ListView的renderRow方法，所以我们可以拿到系统提供给我们的一些参数，如：rowData等
renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<TouchableOpacity activeOpacity={0.5}
style={{height: 90}}
onPress={this.show.bind(this, rowData.name)}>
<View style={styles.container}>
<Image source={{uri: rowData.image}}
style={styles.image}
resizeMode="contain"
/>
<View>
<Text style={styles.title}>{rowData.name}</Text>
<Text style={styles.subTitle}>¥{rowData.money}</Text>
</View>
</View>
</TouchableOpacity>
);
}
注意：
- 上面的代码中有加载静态图片，我这里是用动态的方式来加载的，所以需要在android/app/src/main/res文件下新建一个drawable文件夹，将图片放在里面，并且名称需要与json文件里面的图片名称保持一致。
- 因为我是单独将ListView组件封装成一个js文件，所以并不能拿到this对象，所以需要在系统回调renderRow时将this传递进来，也就是通过bind方法，不然后面用this.show会报错
好了，ListView的初步使用就学习完了。完整代码
