React Native --传值

今天主要记录一下react native的几种传值方式;

1.navigator传值

在此就不记录react-navigation的具体使用方法了,可以参见官网中的使用实例.下面代码记录从home页面跳转到second页面并传递参数的过程;

home页面代码
render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.props.navigation.navigate('second',{datasource: "我是第一个页面传来的数据"})}}>
                    <Text style={{fontSize:16,color:'white'}}>跳转到下一页面</Text>
                </TouchableOpacity>

            </View>
        );
    }

上面代码中onPress={() => {this.props.navigation.navigate('second',{datasource: "我是第一个页面传来的数据"})}}就是声明的一个跳转的点击方法,navigator后面跟的第一个参数second,代表跳转的页面;{datasource: "我是第一个页面传来的数据"}代表要传递过去的参数,名称可以是任意,只要保证在另外一个页面取值时相同即可.当然也可以传递一个json字符串,在另外一个页面通过点语法获取想要的值即可.
接下来看一下在另外一个页面的使用情况

render() {
        //1.不同页面之间使用navigator进行正向传值  
//此处为析构的过程,当然也可以在在下面直接使用this.props.navigation.state.datasource来获取,只不过使用这种方式会更加清晰明了
        const { params } = this.props.navigation.state;
        return (
            <View style={styles.container}>
                <Text>{params.datasource}</Text>
            </View>
        );
    }

2.props传值(一般使用在父子关系的组件中)

首先来写一个子组件(注意次处的子组件和父组件是是在一个js文件中,若在两个js文件中记得使用export default关键字修饰)

class OneView extends Component {
  
    render(){
        return(
            <View>
                <Text>{this.props.textnum}</Text>
            </View>
        );
    }
}

父组件中使用时只要传一个textnum,子组件就可以通过他的props来获取

<OneView  textnum="str"/>

3.ref传值(一般使用在兄弟组件或者在父组件中对子组件局部刷新)

把上面写的OneView的组件做如下修改

class OneView extends Component {
    constructor(props) {
        super(props);
        this.state = {
           //声明一个refNum变量并设初始值为0
            refNum : 0,
        }
        //this._oneFunction = this._oneFunction.bind(this);
    }
    //在此写一个方法,在外面通过ref的方式来调用,更新当前的refNum字段
    _oneFunction = (number) => {
        this.setState({refNum:number})
    }
    render(){
        return(
            <View>
               {/*在此验证上面的方法是否执行*/}
                <Text>{this.state.refNum}</Text>
                <Text>{this.props.textnum}</Text>
            </View>
        );
    }
}

在外面使用时

export default class second extends Component {

    render() {
        return (
            <View style={styles.container}>
               {/*点击方法中通过refs.'设置的ref值'并通过点语法调用组件中的方法*/}
                <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.refs.OneView._oneFunction(7)}}>
                    <Text style={{fontSize:16,color:'white'}}>我是home的二级页面</Text>
                </TouchableOpacity>
                {/*设置组件的ref值,其实就是相当于设置一个索引,在其他的地方可以通过此值来当道当前的组件*/}
                <OneView ref="OneView" textnum="str"/>
            </View>
        );
    }
}

demo地址https://github.com/fttyumicha/react-native-passvalue