React Native 的子组件向父组件传值的简单例子

来源：互联网发布：java开发2017就业饱和编辑：程序博客网时间：2024/06/05 05:00

目前只是找到了一组传值的方法

基本原理是利用RN自带的TouchableOpacity组件中的callbackParent属性来实现

上代码

父组件代码

/**
 * @flow
 */
/* @flow */
//只适用于一组图片的轮播效果
/*import {
  Image,
  StatusBar,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
ScrollView,
  AppRegistry
} from 'react-native';

import React, { Component } from 'react';
import Index from './app/compotent/article/Index.js';
export default class App extends Component {
  render() {
    return (
      <ScrollView>
      <Index/>
      </ScrollView>
    );
  }
}*/



/**
 * Created by mymac on 2017/4/1.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    ListView,
    TouchableHighlight,
} from 'react-native';

import ListViewItem from './ListViewItem_Test.js'

export default class App extends Component {

    constructor(props) {
        super(props);
        //其中提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据
        // 即数据是否发生了改变，即在需要重绘界面的时候会进行判断
        // 如果之前页面中的改行数据没有发生变化，则不再进行重绘，否则进行重绘
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            //然后通过cloneWithRows方法为其传递一个数组
            dataSource: ds.cloneWithRows(this.getDataArray()),
            ImageUrl:[1,],
        };
        //将this的指针转移到父组件
        this.onChildChanged = this.onChildChanged.bind(this);
    }

    
    //初始化数组数据
    getDataArray () {
        var dataArray = [];
        
        for (let i = 0 ; i<10 ; i ++) {
            dataArray.push('row' + i);
        }
        
        return dataArray;
    }
  getImageUrl(){
    let array=this.state.dataSource;
   // array.push(newState);
    console.log(array,'arry');
    // this.setState({ duration: data.duration });

  }
    //子组件向父组件传值需要调用的方法
    onChildChanged (newState) {
    alert(newState);
  //  this.getImageUrl();
   let array=this.state.ImageUrl;
   array.push(newState);
    console.log(array,'arry');
     }


    //相当于iOS中的cell，返回一个视图布局
    _renderRow (rowData, sectionID,rowID){
        return (


        <ListViewItem rowData={rowData}
                      sectionID={sectionID}
                      rowID={rowID}
                      callbackParent={this.onChildChanged}/>
        );
        
    }



    //点击cell触发的方法
    selectCellAction(rowData, sectionID,rowID) {

        alert('rowID:'+rowID);
    }

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


        );
    }
}

AppRegistry.registerComponent('App', () => App);

子组件代码

/**
 * Created by mymac on 2017/4/5.
 */
import React, { Component } from 'react';
import {

    StyleSheet,
    View,
    Text,
    TouchableOpacity,
} from 'react-native';

export default class ListViewItem_Test extends Component {

    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(this.props.rowData);

                  }}>

                <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,

    }
})

0 0