前言

眼看很多公司都開始嘗試使用ReactNative,達(dá)到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.

如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo

ReactNative之父子組件傳值

順傳（父傳子）

• 1.通過props傳值
• 案例：父控件給子控件傳遞名稱，子控件根據(jù)父控件提供的名稱顯示誰的兒子

// 子組件
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拿到控件給控件傳值。
• 案例：爸爸每個月，給兒子生活費.
• 使用箭頭函數(shù)解決綁定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);
                }}>發(fā)生活費</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);

逆?zhèn)鳎ㄗ觽鞲福?/h3>

• 使用方法回調(diào)
  • 1.在父組件中定義一個處理接收到值的方法
  • 2.把這個方法傳遞給子組件，并且綁定this,子組件就能通過this.props拿到這個方法調(diào)用
• 案例：兒子賺錢了，把賺的錢傳遞給父親

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);

無關(guān)聯(lián)組件傳值(通知)

• 當(dāng)兩個組件，互相之間拿不到誰的時候，可以用通知傳值.
  • 哥哥賺錢了，給弟弟花

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);

        // 定義屬性,但是對這個屬性的修改不會觸發(fā)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);
                }}>發(fā)生活費</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);