React-Native 之ListView

最近在摸索react-native，虽然苹果爸爸已经在之前封杀了JSPatch，我还是抱着试一试的态度先学一个疗程，毕竟，知识嘛，多学点总是好的。

其实对于js我了解的不多，所以一些东西给不了相应的解释，还请见谅（ps：我的学习阶段都是从模仿开始的）。后面我会不断的学习基础知识，把相应的解释会添加上去的。见笑了！

接下来先学习一下如何创建一个ListView。

1.设置样式

上代码：

//设置样式
const styles = StyleSheet.create({

//整个listView的样式设置
outerViewStyle: {
//占满窗口
flex: 1
},

//一个自定义view的样式设置
headerViewStyle: {
height: 64,
backgroundColor: 'orange',
justifyContent: 'center',
alignItems: 'center'
},

//列表row的样式设置
rowStyle: {
//设置主轴的方向
flexDirection: 'row',
//侧轴方向居中
alignItems: 'center',

padding: 10,
//单元格底部的线设置
borderBottomColor: '#e8e8e8',
borderBottomWidth: 0.5
},

//分区头部view的样式设置
sectionHeaderViewStyle: {
backgroundColor: '#e8e8e8',
justifyContent: 'center',
height: 25
}
});

以上就是本listView能用到的一些设置。

2.获取数据

用到的数据是本地的json数据

//调取数据
componentDidMount(){
this.loadDataFromJson();
},

var Car = require('./Car.json');
loadDataFromJson(){
//获取json数据
var jsonData = Car.data;

//定义一些变量
var dataBlob = {},
sectionIDs = [],
rowIDs = [],
cars = [];

for (var i = 0; i < jsonData.length; i++) {
//1.把区号放入sectionIDs数组中
sectionIDs.push(i);

//2.把区中的内容放入dataBlob对象中
dataBlob[i] = jsonData[i].title;

//3.取出该组中所有的车
cars = jsonData[i].cars;
rowIDs[i] = [];

//遍历所有的车数组
for (var j = 0; j < cars.length; j++) {
//1.把行号放入rowIDs[i]中
rowIDs[i].push(j);
//2.把每一行的内容放入dataBlob对象中
dataBlob[i + ':' + j] = cars[j];
}
}

//更新状态
this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
});
},

3.初始化函数

//初始化函数
getInitialState(){

//配置区数据
var getSectionData = (dataBlob,sectionID) => {
return dataBlob[sectionID];
};

//配置行数据
var getRowData = (dataBlob,sectionID,rowID) => {
return dataBlob[sectionID + ':' +rowID];
};

return {
dataSource : new ListView.DataSource({

getSectionData: getSectionData,//获取区中的数据
getRowData: getRowData,//获取行中的数据
rowHasChanged: (r1,r2) => r1 !== r2,
sectionHeaderHasChanged: (s1,s2) => s1 !== s2

})

}

},

render() {
return (<ListView />);
},

4.配置数据

// 每一行的数据
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.rowStyle}>
<Text style={{marginLeft:5}}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
},

renderSectionHeader(sectionData,sectionID) {
return(
<View style={styles.sectionHeaderViewStyle}>
<Text style={{marginLeft:5,color:'red'}}>{sectionData}</Text>
</View>
);
}

5.界面显示

render(){
return (
<View style = {styles.outerViewStyle}>
<View style={styles.headerViewStyle}>
<Text style={{color:'white',fontSize:25}}>车的品牌</Text>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
</View>
);
},