ReactNative进阶（四十六）：页面跳转及传参

Dear 丶 2022-08-29 09:37 343阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、页面跳转
     *   *  2.1 页面跳转
         *  2.2 参数传递
         *   *  2.2.1 方法一
             *  2.2.2 方法二：添加监听器 DeviceEventEmitter
     *  三、拓展阅读

--------------------

## 一、前言 ##

前端项目开发过程中，页面跳转必不可少。常见的页面跳转方式有前端框架内置的路由跳转，如：[vue-router][]、[react-router][]、[react-navigation][]，及`href`方式跳转。

本博文主要讲解`ReactNative`下页面之间的跳转及传参。

## 二、页面跳转 ##

### 2.1 页面跳转 ###

不带参数的页面跳转使用`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;

### 2.2 参数传递 ###

**父页面传给子页面**

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

**子页面接收参数**

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

这样子页面就可以获取到父页面传递过来的值。然后是子页面带参数返回页面。

#### 2.2.1 方法一 ####

**子页面传递参数**

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

#### 2.2.2 方法二：添加监听器 DeviceEventEmitter ####

**子页面**

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

**父页面**

import {  DeviceEventEmitter,} from 'react-native';
    
    componentDidMount() { 
      his.listener = DeviceEventEmitter.addListener("returnData", (params) => { 
         Alert(params);
      })
    }
    
    // 组件卸载前务必清除监听器，否则会造成内存泄露！
    componentWillUnmount() { 
      this.listener.remove();
    }

## 三、拓展阅读 ##

*  《[Vue进阶（幺叁捌）：vue路由传参的几种基本方式][Vue_vue]》
 *  《[Vue进阶（二十六）：详解router.push()][Vue_router.push]》
 *  《[ReactNative进阶（七）：导航组件react-navigation][react-navigation]》
 *  《[Vue进阶（六十六）：关于js中页面跳转的用法][Vue_js]》

[vue-router]: https://cn.vuejs.org/v2/guide/routing.html
[react-router]: http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html
[react-navigation]: https://shq5785.blog.csdn.net/article/details/116484822
[Vue_vue]: https://shq5785.blog.csdn.net/article/details/109116439
[Vue_router.push]: https://shq5785.blog.csdn.net/article/details/85220888
[Vue_js]: https://shq5785.blog.csdn.net/article/details/98756141