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

文章目录

• • 一、前言
  • 二、页面跳转
  • • 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进阶（二十六）：详解router.push()》
• 《ReactNative进阶（七）：导航组件react-navigation》
• 《Vue进阶（六十六）：关于js中页面跳转的用法》

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！