React-Native-ListView、ListViewItem(子、父组件互相传值)

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)}
/>

);
}

//此方法解决 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,

}
})