ReactNative页面跳转及传参

举报
SHQ5785 发表于 2023/07/16 09:21:53 2023/07/16
【摘要】 一、前言前端项目开发过程中,页面跳转必不可少。常见的页面跳转方式有前端框架内置的路由跳转,如:vue-router、react-router、react-navigation,及href方式跳转。本博文主要讲解ReactNative下页面之间的跳转及传参。 二、页面跳转 2.1 页面跳转不带参数的页面跳转使用navigation。切换路由方法:this.props.navigation.g...

一、前言

前端项目开发过程中,页面跳转必不可少。常见的页面跳转方式有前端框架内置的路由跳转,如:vue-routerreact-routerreact-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();
}

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。