ReactNative之父子组件传值（五）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之父子组件传值

顺传（父传子）

• 1.通过props传值
• 案例：父控件给子控件传递名称，子控件根据父控件提供的名称显示谁的儿子

// 子组件
class  SonCompoent extends Component{

    render() {
        return (
            <View style={styles.sonViewStyle}>
                <Text style={{fontSize:20}}>{this.props.name}的baby</Text>
            </View>
        );
    };
}

// 父组件
class FatherComponet extends Component {
    
    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                <SonCompoent  name={this.props.name}/>
            </View>
        );
    }
}

// 主组件
export default class ReactDemo extends Component {
    render() {
        return (
            <FatherComponet name="xmg" />
        );
    }
}

const styles = StyleSheet.create({
    sonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    }

});

• 2.有时候需要拿到组件传值，通过ref拿到控件给控件传值。
• 案例：爸爸每个月，给儿子生活费.
• 使用箭头函数解决绑定this问题

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class  SonCompoent extends Component{

    constructor(props){
        super(props);

        this.state = {
            money:0
        }
    }

    receiveMoney(money){
        this.setState({
            money:money
        });
    }

    render() {
        return (
            <View style={styles.sonViewStyle}>
                <Text style={{fontSize:20}}>{this.props.name}的baby</Text>
                <Text>总共收到{this.state.money}生活费</Text>
            </View>
        );
    };
}

class FatherComponet extends Component {


    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                <Text style={{marginTop:100}} onPress={()=>{
                    this.refs.son.receiveMoney(1000);
                }}>发生活费</Text>
                <SonCompoent ref="son" name={this.props.name} />
            </View>
        );
    }
}

export default class ReactDemo extends Component {
  render() {
    return (
        <FatherComponet name="xmg" />
    );
  }
}

const styles = StyleSheet.create({
    sonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    }

});

AppRegistry.registerComponent('React', () => ReactDemo);

逆传（子传父）

• 使用方法回调
  • 1.在父组件中定义一个处理接收到值的方法
  • 2.把这个方法传递给子组件，并且绑定this,子组件就能通过this.props拿到这个方法调用
• 案例：儿子赚钱了，把赚的钱传递给父亲

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class  SonCompoent extends Component{

    makeMoney (money) {
        // 传递给父控件
        console.log('赚了'+ money);
        console.log(this)
        this.props.receiveMoney(money);

    }

    render() {
        return (
            <View style={styles.sonViewStyle}>
                <Text style={{fontSize:20}}>{this.props.name}的baby</Text>
                <Text onPress={this.makeMoney.bind(this,100)}>赚100块钱</Text>
            </View>
        );
    };
}

class FatherComponet extends Component {

    constructor(props){
        super(props);
        console.log(this);
        this.state = {
            money:0
        };
    }

    receiveMoney(money) {
        console.log('爸爸收到'+ money);

        console.log(this);

        var m = this.state.money;

        m += money;

        this.setState({
            money:m
        });

    }

    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                <SonCompoent  name={this.props.name+'A'} receiveMoney={this.receiveMoney.bind(this)}/>
                <SonCompoent  name={this.props.name+'B'} receiveMoney={this.receiveMoney.bind(this)}/>
                <Text style={{marginBottom:50}}>爸爸收到{this.state.money}</Text>
            </View>
        );
    }
}



export default class ReactDemo extends Component {
  render() {
    return (
        <FatherComponet name="xmg" />
    );
  }
}

const styles = StyleSheet.create({
    sonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    }

});

AppRegistry.registerComponent('React', () => ReactDemo);

无关联组件传值(通知)

• 当两个组件，互相之间拿不到谁的时候，可以用通知传值.
  • 哥哥赚钱了，给弟弟花

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    DeviceEventEmitter
} from 'react-native';

class  DiDiCompoent extends Component{

    constructor(props){
        super(props);

        this.state = {
            money:0
        }
    }


    componentDidMount() {

        this.age = 10;
        this.age = 20;

        console.log(this.age);

        // 定义属性,但是对这个属性的修改不会触发render
        this.lister = DeviceEventEmitter.addListener('makeMoney',(money)=>{
            this.setState({
                money:money
            });
        })
    }

    componentWillUnmount() {
        this.lister.remove();
    }


    render() {
        return (
            <View style={styles.didiStyle}>
                <Text> 弟弟</Text>
                <Text>收到{this.state.money}零花钱</Text>
            </View>
        );
    };
}

class GeGeComponet extends Component {

    render() {
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>哥哥</Text>
                <Text onPress={()=>{
                    DeviceEventEmitter.emit('makeMoney',100);
                }}>发生活费</Text>
            </View>
        );
    }
}

export default class ReactDemo extends Component {
    render() {
        return (
            <View style={{flex:1}}>
                <GeGeComponet />
                <DiDiCompoent />
            </View>

        );
    }
}

const styles = StyleSheet.create({
        didiStyle:{
            flex:1,
            justifyContent:'center',
            alignItems:'center'
        }

});

AppRegistry.registerComponent('React', () => ReactDemo);