React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转

1 实现的功能

在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一个App.js文件,实现一个Home页面跳到另外Details页面,并且携带了参数怎么在Details页面获取,就是这么简单粗暴.

2 测试Demo

App.js文件如下,直接拷贝到你的项目,直接运行

import React from 'react';
import { View, Text, Button} from 'react-native';
import { createStackNavigator } from 'react-navigation';//HomeScreen是一个页面路由
class HomeScreen extends React.Component {//navigationOptions 这是就像Android toolbar中间的文字,title就是这里的名字,下面的页面可以自己通过参数携带过去,然后显示static navigationOptions = {title : 'HomeScreen',}render() {return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>Home Screen</Text>//this.props.navigation.navigate('Details');就是导航到这个Details页面去,也就是跳到这个页面,//DetailsScreen,因为我们下面在createStackNavigator写了Details页面路由名字,一般需要携带参数,也就是//下面这种写法this.props.navigation.navigate('Details', {key : value, ...});//这里我们传递了2个参数,分别是itemId,otherParam,我们需要到DetailsScreen这个页面获取<Button onPress={() => this.props.navigation.navigate('Details', {itemId:100,otherParam:'chenyu',})} title = "go to Details"/>//下面的this.props.navigation.goBack()方法是返回上一个页面,就相当于按下了手机返回物理键一样的效果   <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/></View>);}
}
//DetailsScreen是一个页面路由
class DetailsScreen extends React.Component {/**static navigationOptions = {title : 'DetailsScreen',}**///这里的title就是通过HomeScreen页面参数携带过来的,这里的{navigation}和下面的{navigation}的类似static navigationOptions = ({navigation}) => {return {title : navigation.getParam('otherParam', 'no-values'),};};render() {//这里我们先要获取{navigation}通过this.props;const {navigation} = this.props;//通过navigation.getParam来获取传递过来的参数const itemId = navigation.getParam('itemId', 'no-values');const otherParam = navigation.getParam('otherParam', 'no-values');return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text>//JSON.stringify(object)是把对象转为字符串,所以下面的内容会显示从HomeScreen页面携带过来的参数<Text>itemId:{JSON.stringify(itemId)}</Text><Text>otherParam:{JSON.stringify(otherParam)}</Text>//这里用到了this.props.navigation.push('Details', {...})来跳到一个新的页面,新的页面也就是自己,还携带了参数//因为所有页面是一个栈,如果这里用this.props.navigation.navigate('Details')会没有效果,因为//this.props.navigation.navigate发现是跳转是自己页面会不跳<Buttontitle="Go to Details... again"onPress={() => this.props.navigation.push('Details', {itemId: Math.floor(Math.random() * 100),})}/>//这里我们从Details页面跳到了Home页面//this.props.navigation.navigate(路由名字),要记得不是类名,别傻逼了<Buttontitle="Go to Home"onPress={() => this.props.navigation.navigate('Home')}/>//下面的this.props.navigation.goBack()方法是返回上一个页面,就相当于按下了手机返回物理键一样的效果   <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/>//this.props.navigation.popToTop()是回到栈底页面的函数,因为我们一开始进来的时候是Home页面,//所以这里也跳到了Home页面<Buttontitle="Go popToTop"onPress={() => this.props.navigation.popToTop()}/></View>);}
}//这里我们创建了导航栈
const RootStack = createStackNavigator(//这里是写路由名字,Home和Details是路由名字,相当于对应2个页面//这里的HomeScreen和DetailsScreen必须是screen熟悉{Home: HomeScreen,Details: DetailsScreen,},//下面就是一些初始化的配置,初始加载Home这个页面{initialRouteName: 'Home',}
);export default class App extends React.Component {render() {return <RootStack/>;}
}/**export default createStackNavigator({Home: {screen: HomeScreen},
});**/

3 运行结果

初始运行Home页面的效果如下

然后我点击了GO TO DETAILS这个按钮,然后就携到了另外一个页面

我们这里获取到了导航栏的title,然后也看到了携带过来的参数,然后你可以点击下面的几个按钮测试下效果.

React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转相关推荐

在 iOS 与 Android 上实现 React Native 应用深度链接，通过 URL 打开到指定页面
在 iOS 与 Android 上实现 React Native 应用深度链接,使得应用可以通过我们生活在一个万物兼可分享的年代,而分享的过程,几乎最终都会分享某一个链接,那么,作为开发者,最常遇到 ...
React Native ---fetch 之GET请求带参数
网上关于其GET请求的用例全是没有带参数的,带参数的又全部是POST请求下面给出带参数的做法. export function get(url,params){if (params) {let par ...
React Native——react-navigation的使用
在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...
React Native布局详细指南
本文出自<React Native学习笔记>系列文章. 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Nati ...
React Native实例之房产搜索APP
React Native 开发越来越火了,web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学 ...
React Native开发总结（一）
一.RN优劣势 React Native的设计理念: 既拥有Native的用户体验.又保留React的开发效率优势: 它对比原生开发更为灵活,对比H5体验更为高效. 替代传统的WebView,打开效 ...
React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...

React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转

1 实现的功能

2 测试Demo

3 运行结果

React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转相关推荐

最新文章

热门文章