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

首先记录下实现ListView的过程吧http://www.jianshu.com/p/031df20b0e78

 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,

    }
})

代码地址：https://github.com/chjwrr/React-Native-UI-Test