Demo展示
實(shí)現(xiàn)步驟
對(duì)于原生Android來(lái)說(shuō)奠伪，數(shù)據(jù)的列表展示也是用ListView目溉，對(duì)于IOS來(lái)說(shuō)弱左，則是用cell來(lái)展示列表數(shù)據(jù)代嗤，而在RN中也是用ListView棘钞。雖然是不同的平臺(tái)，但對(duì)于列表顯示來(lái)說(shuō)干毅，都需要提供數(shù)據(jù)源宜猜，并且還需要?jiǎng)?chuàng)建這個(gè)列表控件的對(duì)象
準(zhǔn)備數(shù)據(jù)源
ListView顯示本地?cái)?shù)據(jù)，由于數(shù)據(jù)較多硝逢，我們不可能把它寫(xiě)在代碼中姨拥，所以我們會(huì)把它放在一個(gè)json文件，然后去讀取數(shù)據(jù)渠鸽，如下面的Wine.json：
[
{
"image": "one",
"money": "39",
"name": "德國(guó)OETTINGER奧丁格大麥啤酒500ml*4罐/組"
},
{
"image": "two",
"money": "40",
"name": "德拉克（Durlacher） 黑啤酒 330ml*6聽(tīng)"
}
...
]
那如何去獲取這些數(shù)據(jù)了叫乌？很簡(jiǎn)單，只需要在代碼中引入這個(gè)js文件就可以了拱绑，如：
var data = require('./Wine.json');
初始化ListView
constructor(props) {
super(props);
//獲取ListView數(shù)據(jù)源
var data = this.props.data;
//創(chuàng)建ListView對(duì)象
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
//將數(shù)據(jù)源與ListView對(duì)象進(jìn)行綁定
dataSource: ds.cloneWithRows(data)
};
}
我是將ListView組件進(jìn)行了封裝，所以需要獲取從index.android.js文件中傳遞過(guò)來(lái)的數(shù)據(jù)源丽蝎。一般的初始化工作都是在一個(gè)組件的構(gòu)造方法來(lái)完成的猎拨，這是ES6的寫(xiě)法。rowHasChanged: (r1, r2) => r1 !== r2這句代碼是用來(lái)控制item數(shù)據(jù)的更新屠阻，當(dāng)且僅當(dāng)任意兩行數(shù)據(jù)不相等時(shí)才去更新數(shù)據(jù)源红省。這里是RN中的一個(gè)性能優(yōu)化。
渲染ListView
render() {
return (
<ListView
//數(shù)據(jù)源就是我們初始化的值
dataSource={this.state.dataSource}
//這是一個(gè)ListView中的一個(gè)回調(diào)方法
renderRow={this.renderRow.bind(this)}
/>
);
}
//我們重寫(xiě)了ListView的renderRow方法国觉，所以我們可以拿到系統(tǒng)提供給我們的一些參數(shù)吧恃，如：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>
);
}
注意：
- 上面的代碼中有加載靜態(tài)圖片，我這里是用動(dòng)態(tài)的方式來(lái)加載的麻诀，所以需要在android/app/src/main/res文件下新建一個(gè)drawable文件夾痕寓，將圖片放在里面，并且名稱需要與json文件里面的圖片名稱保持一致蝇闭。
- 因?yàn)槲沂菃为?dú)將ListView組件封裝成一個(gè)js文件呻率，所以并不能拿到this對(duì)象，所以需要在系統(tǒng)回調(diào)renderRow時(shí)將this傳遞進(jìn)來(lái)呻引，也就是通過(guò)bind方法礼仗，不然后面用this.show會(huì)報(bào)錯(cuò)
好了，ListView的初步使用就學(xué)習(xí)完了。完整代碼
