react-native react-navigation的用法
react-navigation升级了, 看这个:
一、问题背景
react-navigation是react-native官方推荐的,基于Javascript的可扩展且使用简单的导航,功能强大且完备
回顾一下,react-navigation包含以下功能来帮助我们创建导航器:
- StackNavigator - 一次只渲染一个页面,并提供页面之间跳转的方法。 当打开一个新的页面时,它被放置在堆栈的顶部
- TabNavigator - 渲染一个Tab选项卡,让用户可以在几个Tab页面之间切换
- DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉,类似bilibili和QQ的隐藏在左侧的内容栏功能
(1)通过navigate函数实现界面之间跳转:
this.props.navigation.navigate('Mine');
参数为我们在StackNavigator注册界面组件时的名称。
同样也可以从当前页面返回到上一页:
// 返回上一页
this.props.navigation.goBack();
这是手动返回上一页,也可通过每个页面自带的返回图标返回
(2)跳转时传值:
this.props.navigation.navigate('Mine',{info: 'value'});
第一个参数同样为要跳转的界面组件名称,第二个参数为要传递的参数,info可以理解为key,后面即传递的参数(value值)。
同样,我们也可以在跳转后的页面去获取携带过来的值:
this.props.navigation.state.params.info}
通过state.params来获取传来的参数,后面为key值。此处为info。
//会覆盖StackNavigator声明的页面的navigationOptions
static navigationOptions = ({navigation}) => ({
headerTintColor: '#fff',
headerStyle: {height: 65, backgroundColor: '#fb7299'},
headerTitle: navigation.state.params.title, //这是从上一级跳转携带的
headerTitleStyle: {
fontSize: 18,
color: '#fff',
alignSelf: 'center', //包括下面的属性主要是为了标题居中显示
flex: 1,
textAlign: 'center'
},
headerRight: <View>
<TouchableOpacity onPress={() => {navigation.state.params.toOperate();}}> //此处必须通过添加参数的形式来调用方法
<View><Text style={{color: '#fff', marginRight: 20}}>下一步</Text></View>
</TouchableOpacity >
</View>
})
1. navigation.state.params.title表示通过参数的形式来显示标题
2. 想要标题居中,alignSelf: 'center', flex: 1, textAlign: 'center'
3. navigation.state.params.toOperate();通过这种传参的方式,在标题栏中调用方法 该方法需要在componentDidMount()等方法中设置传递
componentDidMount() {
this.props.navigation.setParams({toOperate: () => {
alert('操作')
}})
}
三、结语
先这样咯!
react-native react-navigation的用法的更多相关文章
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- React Native中ref的用法(通过组件的ref属性,来获取真实的组件)
ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...
- 转载一篇React native的props的用法
注:默认值如何设置 http://www.tuicool.com/articles/uMfYv2q
- React Native纯干货总结
随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- H5、React Native、Native应用对比分析
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...
- React Native控件之Listview
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView并不立即渲染 ...
- H5、React Native、Native性能区别选择
“存在即合理”.凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移 ...
- React Native笔记整理
判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...
随机推荐
- NodeJS反序列化漏洞利用
原文来自:http://www.4hou.com/web/13024.html node.js是一个服务器端的运行环境,封装了Google V8引擎,V8引擎执行JavaScript速度非常快,性能非 ...
- New Concept English Two 18 46
$课文44 穿过森林 451. Mrs. Anne Sterling did not think of the risk she was taking when she ran through a ...
- mongodb配置数据库文件夹,创建服务
配置步骤 1.新建data文件夹,并在data下创建db及log文件夹 2.在mongodb安装目录下新增mongod.cfg文件,配置如下 systemLog: destination: fi ...
- c++类成员函数重载常量与非常量版本时避免代码重复的一种方法
c++有时候需要为类的某个成员函数重载常量与非常量的版本,定义常量版本是为了保证该函数可作用于常量类对象上,并防止函数改动对象内容.但有时两个版本的函数仅仅是在返回的类型不同,而在返回前做了大量相同的 ...
- win32程序显示网页
说是win32,实际程序中使用了atl的东西.所以新建win32程序时,记得勾选使用atl: 代码如下: #include "stdafx.h" #include "Wi ...
- 解决brew报错:Another active Homebrew update process is already in progress
在mac终端下执行:brew install glew结果报错: Error: Another active Homebrew update process is already in progres ...
- POI使用 (4.0) 常用改动
POI 升级到高版本后,原有的EXCLE导入导出工具类部分代码已不适用,目前只是对我自己写的工具类的过期代码进行更新,以后继续更新 若有问题请指出,再修改 1.数据类型 Cell.CELL_TYPE_ ...
- PAT 1016 部分A+B C语言
1016. 部分A+B (15) 正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA.例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6 ...
- Linux 增加系统调用 (转)
Linux 增加系统调用大致步骤: 1.下载好内核文件,在内核源文件中添加好自己的调用函数. 2.编译内核 3.验证. 一.在内核源文件中增加自己的函数 首先将内核文件移至/usr/src/下并解压. ...
- 【monkeyrunner】monkeyrunner 的主要API和实例
MonkeyRunner简介 monkeyrunner工具提供了编写控制Android设备或仿真器从Android的代码之外程序的API.随着monkeyrunner,您可以编写安装一个Android ...