首先记录下实现ListView的过程吧
constructor(props) {
super(props);
//其中提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据
// 即数据是否发生了改变，即在需要重绘界面的时候会进行判断
// 如果之前页面中的改行数据没有发生变化，则不再进行重绘，否则进行重绘
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
//然后通过cloneWithRows方法为其传递一个数组
dataSource: ds.cloneWithRows(this.getDataArray()),
};
}
//初始化数组数据
getDataArray () {
var dataArray = [];
for (let i = 0 ; i<10 ; i ++) {
dataArray.push('row' + i);
}
return dataArray;
}
//子组件向父组件传值需要调用的方法
onChildChanged (newState) {
alert(newState);
}
//相当于iOS中的cell，返回一个视图布局
_renderRow (rowData, sectionID,rowID){
return (
//相当于单独的cell
//rowData、sectionID、rowID是给ListViewItem传的值（父组件向子组件传值）
//callbackParent，是一个方法，用于接收子组件向父组件传的消息
//子组件向父组件回传时，会调用this.onChildChanged这个方法
<ListViewItem rowData={rowData}
sectionID={sectionID}
rowID={rowID}
callbackParent={this.onChildChanged}/>
);
}
//分割线
_renderSeparator(rowData, sectionID, rowID, highlightRow) {
return(
<View style={{backgroundColor:'red',height:1}}></View>
)
}
render() {
return (
<ListView style={{flex:1}}
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
renderSeparator={this._renderSeparator.bind(this)}
/>
);
}
ListViewItem
//此方法解决 Touchable child must either be native or forward setNativeProps to a native component.
//参考：http://reactnative.cn/docs/0.20/direct-manipulation.html
setNativeProps(nativeProps) {
this.refs._root.setNativeProps(nativeProps);
}
render() {
//接收父组件向子组件传的值
const {rowData,sectionID,rowID} = this.props;
return (
<TouchableOpacity ref="_root"
style={ListViewItem_TestStyle.itemStyle}
onPress={() => {
//在子组件中点击按钮，这里将事件传递给父组件，
this.props.callbackParent('你好啊');
}}>
//使用传过来的值
<Text>{'rowdata:'+this.props.rowData}</Text>
<Text>{'sectionID:'+this.props.sectionID}</Text>
<Text>{'rowID:'+this.props.rowID}</Text>
</TouchableOpacity>
);
}
}
let ListViewItem_TestStyle =StyleSheet.create({
itemStyle:{
height:60,
}
})
