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,然后也看到了携带过来的参数,然后你可以点击下面的几个按钮测试下效果.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

google浏览器插件 开发 获取页面指定数据_程序员必备的4款Chrome插件,编程神器...

一直有粉丝留言&#xff0c;想要大侠推荐几款程序员使用的插件&#xff0c;大侠特意去问了隔壁的程序员哥哥&#xff0c;终于被我问出了这4款编程神器&#xff01;这4款插件不仅仅是提高效率那么简单哦&#xff0c;还可以让你的Chrome浏览器变得高端大气&#xff0c;一起来看看…

强制类型转换问题

在c中&#xff0c;当把一个表示范围更大的类型的数值a赋值给一个表示范围更小的类型时&#xff0c;会自动进行强制类型转换&#xff0c;转化为范围表示更大的类型。 转换的规律是&#xff0c;这里假定较小的类型表示的数值的个数为n。转化后的值为a模n后的余数。 对于整型数a&a…

MATLAB多元非线性回归

解释变量&#xff1a;商品价格&#xff08;x1&#xff09;人均月收入&#xff08;x2&#xff09;&#xff0c;被解释变量&#xff1a;商品需求量&#xff08;y&#xff09;&#xff0c;进行二元回归分析&#xff0c;并进行检验 商品价格(元/件) 月收入(元) 需求(件) 89 …

媒体应用大数据,先解决三大难题

在大数据时代&#xff0c;互联网是骨骼&#xff0c;大数据则是血液。大数据的核心在于数据&#xff0c;具有海量、高频、在线、实时等特点&#xff0c;但是对于传统媒体来说&#xff0c;在运用大数据的过程中&#xff0c;存在着数据资源不足、数据平台欠缺和缺乏有竞争力的数据…

mysql之主从复制 简书_MySQL主从复制(传统)

拓扑结构&#xff1a;(一主多从)Mysql-master01 (192.168.43.123)Mysql-slave01 (192.168.43.124)Mysql-slave02 (192.168.43.125)版本信息&#xff1a;OS版本 &#xff1a; CentOS release 6.10 最小化安装Mysql版本&#xff1a; mysql-5.7.31-1.el6.x86_64.rpm…

.NET高级调试 | 通过JIT拦截无侵入调试 C# Emit 生成的动态代码

大家还记得上一篇的测试代码吗&#xff1f;我们用了&#xff1a;Console.WriteLine("Function Pointer: 0x{0:x16}", Marshal.GetFunctionPointerForDelegate(addDelegate).ToInt64());来获得 委托 的 函数指针 地址&#xff0c;通过这个突破口最终实现了 动态代码 的…

linux之eval命令

1 eval命令 eval命令将会首先扫描命令行进行所有的替换&#xff0c;类似于C语言中的宏替换&#xff0c;然后再执行命令,该命令使用于那些一次扫描无法实现其功能的变量。该命令对变量进行两次扫描. 2 测试使用 ~$ echo chenyu > 1.txt ~$ puts"cat 1.txt" ~$ ev…

ArrayList用法说明

System.Collections.ArrayList类是一个特殊的数组。通过添加和删除元素,就可以动态改变数组的长度。 一.优点 1。支持自动改变大小的功能 2。可以灵活的插入元素 3。可以灵活的删除元素 二.局限性 跟一般的数组比起来,速度上差些

[译] ASP.NET 生命周期 – ASP.NET 上下文对象(八)

使用 HttpResponse 对象 HttpResponse 对象是与 HttpRequest 对象相对应的&#xff0c;用来表示构建中的响应。它当中提供了方法和属性可供我们自定义响应&#xff0c;有一些在使用 MVC 视图的时候很少使用到&#xff0c;但是在使用其他组件的时候可能十分有用&#xff0c;比如…

使用IAR开发CC2530遇到的两个问题

2019独角兽企业重金招聘Python工程师标准>>> 首先说明&#xff0c;IAR for 8051为7.51版本&#xff0c;操作系统为windows7 32位。 上手CC2530&#xff0c;在IDE的使用上就遇到了2个问题。 一个是用SmartRF Programmer Flash下载HEX文件不成功&#xff0c;提示说cou…

openssh登陆时提示服务器拒绝了密码

升级openssh7.5后&#xff0c;登陆报错按照网上的说法是不允许root用户登陆但是&#xff0c;/etc/ssh/sshd_config 已经写入PermitRootLogin yes解决方法&#xff1a;设置/etc/sysconfig/selinux 中的SELINUXdisabled然后重启就OK了转载于:https://blog.51cto.com/adamcrab/194…

js监听地址栏变化_vue中本地储存也可以实时监听

网上看到的这个方法 在项目里使用了 贼爽啊&#xff0c;分享下顺便说一下 localStorage也实用比如 在同一个页面里边 不同位置 两个变量的呈现都是使用的本地储存且一个变量修改&#xff0c;第二个变量也要实时变化 在正常情况下 修改一个的值后储存起来 在不刷新页面的情况下 …

Blazor University (10)组件 — 捕获意外参数

原文链接&#xff1a;https://blazor-university.com/components/capturing-unexpected-parameters/捕获意外参数源代码[1]之前我们已经看到了如何使用特定名称声明参数和级联参数。例如&#xff0c;一个将 <img> 元素包装在一些自定义 HTML 中的自定义组件。<div cla…

mysql 5.7 主从切换_mysql5.7 主从复制的正常切换【转】

目前环境如下&#xff1a;master server IP:172.17.61.131slave server IP:172.17.61.132mysql version: mysql-5.7.21-linux目标&#xff1a;计划内的主从复制正常切换1.切换之前需要检查slave的同步状态&#xff0c;对master进行锁表。slave server: 确保Slave_IO_Running和S…

React Native之最构建对象通过构造方法传递值然后再获取值

1 问题 在一个文件构建一个对象,然后在另外一个文件里面new这个对象,通过构造方法传递参数,然后再获取这个参数 2 测试代码 Student.js文件如下 use strict;import React from reactimport {NativeModules, NativeEventEmitter, DeviceEventEmitter,Alert} from react-nativ…

System.Diagnostics.Process.Start()用法详解

System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1、打开某个链接网址(弹窗)。 2、定位打开某个文件目录。 3、打开系统特殊文件夹,如“控制面板”等。 那么它是怎么实现这几个功能的呢?在讲应用前,我们先来看看Process.Star()的构造方法。

后缀自动机在复习

后缀自动机&#xff0c;处理所有子串。 注意&#xff1a;nq节点的建立&#xff0c;是因为新加了一个字母使原本为一个状态的东西必须分为两个状态&#xff0c;例如ba到baa&#xff0c;a的出现次数变多&#xff0c;a状态与ba状态分离。baa的新pnt不能是ba&#xff0c;因为空节点…

1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列

1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 510 Solved: 196[Submit][Status][Discuss]Description Farmer Johns N cows (1 < N < 100,000) share many similarities. In fact, FJ has been able to narrow…

.NET点滴:SpanT

昨天小桂问了一个问题&#xff0c;把一个数组的全部元素加1&#xff0c;有什么好办法&#xff0c;于是有了下面的分析&#xff1a;var arr new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9 }; //方法一 foreach (var i in arr) {i; } //方法二 for (var i 0; i < arr.Length; i) {…

React Native之通过DeviceEventEmitter发送和接收事件

1 怎么实现发送和接收事件 理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现 //增加监听 DeviceEventEmitter.addListener //取消监听 //this.emitter.remove(); 这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客 React Nat…