react-native 实现页面之间的相互传值

用到 React Navigation 组件

兼容性: IOS/Android
原理: React Navigation 为页面的 props 上挂载了 navigation 对象, 可用来做路由跳转，在做页面跳转时可以携带参数/回调方法前往目标页面， 从而达到传参的目的。

切换路由方法：

    this.props.navigation.goBack() 返回上一层
    this.props.navigation.popToTop() 返回堆栈最顶层
    this.props.navigation.push(‘Details’) 继续往下推送新的路由，相当于子页面的子页面
    this.props.navigation.navigate(‘Details’) 将新路由推送到导航器中，如果没有在导航器中，则跳转到该页面

父页面A：

import {Component} from "react";
import {
    Text,AlertStatic as Alert,
    TouchableOpacity,
    View,
    DeviceEventEmitter
} from "react-native";
import {createStackNavigator} from "react-navigation";
import B from '../B.js';
calss A extends Component {
    render(){
        return(
            <View>
                <TouchableOpacity onpress={
                    ()=>{
                        this.props.navigation.navigate('B')
                    }
                }>
                    <Text>点击跳转</Text>
                </TouchableOpacity>
            </View>
         )
    }
}
const HomeScreen = createStackNavigator({
    Home: {screen: A},
    Details: {screen: B},
});
module.exports = A;

子页面B：

import {Component} from "react";
import {
    Text,
    TouchableOpacity,
    View,
    DeviceEventEmitter
} from "react-native";
class B extends Component {
    render(){
            return(
                <View>
                    <TouchableOpacity onpress={
                        ()=>{
                            this.props.navigation.goBack();
                        }
                    }>
                        <Text>点击返回</Text>
                    </TouchableOpacity>
                </View>
             )
        }
}
module.exports = B;

接下来是带参数传递方法：

父页面传参数给子页面

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.navigate('B',{
            params:xx,
        })
    }
}>

子页面接收参数

constructor(props){
    super(props);
    const {navigation} = this.props;
    let yy = navigation.getParam("params"); 
}

这样子页面就获取到父页面传递过来的值了。

子页面带参数返回父页面方法（两种方式）：

方法一：
子页面传递参数

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.state.params.callBack(params);
        this.props.navigation.goBack();
    }
}>
    <Text>点击返回</Text>
</TouchableOpacity>

父页面接收参数

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.navigate('B',{
            params:xx,
            callBack:(params) =>{
                Alert(params);
            }
        })
    }
}>

方法二：

添加一个监听器DeviceEventEmitter

子页面

TouchableOpacity onpress={
    ()=>{
        DeviceEventEmitter.emit('returnData',params);
        this.props.navigation.goBack();
    }
}>
    <Text>点击返回</Text>

父页面

componentDidMount() {
     DeviceEventEmitter.addListener("returnData", (params) => {
            Alert(params);
     })
}

ok，完成！

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_9383