王学岗ReactNative开发3————父组件与子组件的互相通信

第一：父组件与子组件通信：
我们首先看下项目目录
新创建Parent.js文件

//注意这种写法：{Component},可以理解为导入React的内部类的格式，{}代表React的内部类
import React, {Component} from "react";
import {Text, View} from "react-native";

export default class Parent extends Component {
    //构造方法有一个固定参数props,另外要添加super
    constructor(props) {
        super(props);
        //构造方法里做状态声明，这个状态指的就是state
        //rn不知道state里到底有什么东西，只知道有state这个属性，
        //至于属性里面有什么东西，rn是不知道的，rn如果不知道，就没办法做对应的刷新
        //在这里告诉rn state里有哪些东西
        this.state = {
            //需要传给子组件的msg
            msg: "我是父亲"
        }
    }

    render() {
        //在这里传值给子组件,父组件给子组件传值，一般都是在标签里给属性赋值，
        // 可以赋值数据，也可以赋值方法。传递给子组件的props
        return <Son_1 msg={this.state.msg}/>
    }
}

class Son_1 extends Component {
    render() {
        return (
            <View>
                {/*这里接收父组件传过来的值
                 */}
                <Text>{this.props.msg}</Text>
            </View>
        )
    }
}

修改index.js

 /**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Parent from "./Parent";

AppRegistry.registerComponent(appName, () => Parent);

() => Parent
注意上面这种写法，当{}里只有一个return语句的时候，可以省略{},所以这里只写了一个Parent返回值
看下运行效果

这个组件外面是父组件，里面是子组件，子组件才有Text标签
第二：子组件想与父组件通信又该怎么办
现在我要子组件给父组件传递数据，这个传递的只有一个途径，那就是通过方法。方法可以有参数，通过参数的形式将子组件的数据返回给父组件。这里就不能在使用props了，props只能单向传递即，父组件传递给子组件
我们看下Parent.js文件

import React,{Component,PureComponent} from 'react'
import {Text,TouchableOpacity,View} from 'react-native'
//TouchableOpacity,相当于是一个Button,可以根据触摸调用
export default  class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    //这里的方法是一个类，是一个方法的对象，
    // 赋值给onClickSon,onClickSon就代表这个接口，
    //onClickSon就代表这个方法的引用，传递给onClickSon方法
    onClickSon = (msgFromSon) => {
        console.log(msgFromSon)
    }
    render() {
        //这里的onClickSon方法参数，就是一个变量名，
        return (
            <Son onClickSon={this.onClickSon}/>
        )
    }
}
//PureComponent   Component
class Son extends PureComponent {
    render() {
        return (
            {/*
                   onPress相当于android 的setOnClickListenner,
                   onPress里面需要传递一个方法，通过触摸函数来写这个方法
                   因为=>后只有一句代码，所以省略了{}
                 */}
            <TouchableOpacity onPress={()=> this.props.onClickSon('I am your son')}>
                <Text>david</Text>
            </TouchableOpacity>
        )
    }
}

可以看到打印输出I am your son