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

浅浅的花香味﹌ 2022-04-14 02:27 307阅读 0赞

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

之前在自己学习react-native的时候，在页面跳转和传值问题上花了一段时间去网上搜索和查找资料，自己总结了两个方法。可以参考 [https://blog.csdn.net/shb2058/article/details/80390468][https_blog.csdn.net_shb2058_article_details_80390468] 和 [https://blog.csdn.net/shb2058/article/details/80432014][https_blog.csdn.net_shb2058_article_details_80432014]  
首先设置一个不带参数的页面跳转使用navigation  
切换路由方法：

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

父页面：

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;

子页面：

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_blog.csdn.net_shb2058_article_details_80390468]: https://blog.csdn.net/shb2058/article/details/80390468
[https_blog.csdn.net_shb2058_article_details_80432014]: https://blog.csdn.net/shb2058/article/details/80432014