ReactNative页面跳转及传参
【摘要】 一、前言前端项目开发过程中,页面跳转必不可少。常见的页面跳转方式有前端框架内置的路由跳转,如:vue-router、react-router、react-navigation,及href方式跳转。本博文主要讲解ReactNative下页面之间的跳转及传参。 二、页面跳转 2.1 页面跳转不带参数的页面跳转使用navigation。切换路由方法:this.props.navigation.g...
一、前言
前端项目开发过程中,页面跳转必不可少。常见的页面跳转方式有前端框架内置的路由跳转,如: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();
}
三、拓展阅读
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)