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

最新推荐文章于 2022-01-25 21:54:17 发布

SnowAnna

最新推荐文章于 2022-01-25 21:54:17 发布

阅读量935

点赞数

CC 4.0 BY-SA版权

分类专栏： React-Native

本文链接：https://blog.youkuaiyun.com/weixin_38289699/article/details/70598139

React-Native 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在React Native中实现ListView数据交互的方法，利用TouchableOpacity组件的特性完成从子组件到父组件的数据传递，适用于需要更新父组件状态的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

基本原理是利用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,

    }
})