18.React Navtive组件之间传值

目录

1.父组件传值给子组件

1.1静态传值，通过props传值

1.2动态传值，借助ref属性，获取子组件，调用子组件方法传值

2.子组件传值给父组件

3.兄弟组件之间传值

4.props和state

---

介绍：RN中每个界面可以是一个组件显示也可以由多个组件组合显示，以便于维护和复用，界面显示需要各种值、用户输入数值或者数据交互，那么就会牵涉组件之间传值，组件传值主要有父组件传值给子组件，子组件传值给父组件，兄弟组件之间传值等。

1.父组件传值给子组件

1.1静态传值，通过props传值

实现name属性值传递，传递顺序主组件->父组件->子组件，最终子组件接收到name属性值并显示；

import React, {Component} from "react";
import {View,
        StyleSheet,
        Text} from "react-native";
//子组件
class SonComponent extends Component{
    render(){
        return(<View style={styles.sonViewStyle}>
            <Text style={
  {fontSize:20}}>这是父视图传递过来的数据：{this.props.name}</Text>
        </View>);
    }
}

//父组件
class FatherComponent extends Component{
    render(){
        return (
            <View style={styles.container}>
                <SonComponent name={this.props.name}/>
            </View>
        );
    }
}

//主组件
export default class RNPassValueComponent extends Component{
    render(){
        return (<View style={styles.container}>
                <FatherComponent name="name属性值传递"/>
        </View>);
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
    },

    sonViewStyle: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',
        alignItems: 'center',
    },
});

1.2动态传值，借助ref属性，获取子组件，调用子组件方法传值

示例：点击父组件FatherComponent中+号，实现每次点击，让SonComponent组件输出数字加1；

a.在父组件FatherComponent中显示子组件SonComponent，并定义子组件SonComponent的ref引用为son；

<SonComponent ref="son" number={this.props.number}/>

b.在父组件FatherComponent中实现获取