react-native填坑--react-navigation
Navigator
已经被React Native废弃了。也许你可以在另外的一个依赖库里react-native-deprecated-custom-components
里找到。不过既然官方推荐的是react-navigation
那我们就来看看这个东西到底有什么好的,值不值得用。
react-navigation
包括下面三个Navigator:
StackNavigator
: 这个组件是用来代替之前的Navigator
的。凡是维持一种“先进后出”的栈式导航的话就可以用这个。TabNavigator
:这个组件和iOS的`TabBarController。看起来是这样的。DrawerNavigator
:这个组件就是抽屉式的导航菜单。在React Native里只有Android才有:DrawerLayoutAndroid
,在iOS里是没有的。有了DrawerNavigator
,两个平台都可以用了。
最简单的用法:
import { StackNavigator } from "react-navigation";
export default NavHome = StackNavigator({
Home: {
screen: NavApp,
},
Message: {
screen: MessageContainer,
},
})
实现页面间的跳转:
StackNavigator(RouteConfigs, StackNavigatorConfig)我们需要配置navigationOptions
//App.js 页面
<Button onPress={this.props.navigation.navigate('Message')} title={'To message'} /> //MessageContainer.js
<Button onPress={this.props.navigation.goBack()} title={'Go Back'} /> Home: {
screen: App,
navigationOptions: ({navigation}) => ({
title: 'Home',
headerLeft: (<Button onPress={() => navigation.navigate('DrawerToggle')} title={'User'} />),
headerRight: (<Button onPress={() => navigation.navigate('Message')} title={'Message'} />),
})
},
react-native填坑--react-navigation的更多相关文章
- React Native 填坑一
React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justif ...
- React Native填坑之旅--Navigation篇
React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--组件生命周期
这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- React Native填坑之旅--ListView篇
列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...
- React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...
- React Native填坑之旅--Button篇
从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...
随机推荐
- AC日记——[USACO09JAN]全流Total Flow 洛谷 P2936
题目描述 Farmer John always wants his cows to have enough water and thus has made a map of the N (1 < ...
- Codeforces Gym101502 K.Malek and Summer Semester
K. Malek and Summer Semester time limit per test 1.0 s memory limit per test 256 MB input standard ...
- 思科CCIE全新升级,SDN/SD-WAN成重头戏!
CCIE,全称Cisco Certified Internetwork Expert,是美国Cisco公司于1993年开始推出的专家级认证考试.被全球公认为IT业最权威的认证,是全球Internetw ...
- mysql 设置不了短串密码怎么办 You must reset your password using ALTER USER statement before executing this statement.
centos7+ 安装 mysq 5.7 https://www.linuxidc.com/Linux/2016-09/135288.htm set global validate_password_ ...
- 作为使用者对qq拼音输入法和搜狗输入法的评价
我还记得在打字方面从一开始XP里面自带的中文输入法到QQ拼音输入法的过度,当时第一次使用qq拼音最大的感受就是这个输入法很智能,给人一种恍然一新的感觉,对于XP系统中自带的拼音输入法,QQ拼音最大的特 ...
- Java加密技术(八)——数字证书
原文:http://snowolf.iteye.com/blog/391931 请大家在阅读本篇内容时先阅读 Java加密技术(四),预先了解RSA加密算法. 在构建Java代码实现前,我们需要完成证 ...
- ADO如何记录SQL日志
ADO如何记录SQL日志 procedure TfrmDM.ADOConnection1WillExecute(Connection: TADOConnection; var CommandText: ...
- [NSThread sleepForTimeInterval:3.0];
在- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)laun ...
- Android ANR原理分析
一.概述 ANR(Application Not responding),是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过 ...
- 【Exception】查看异常出现在具体的文件名/类名/方法名/具体行号
今天在处理异常日志保存过程中,想要获取到异常抛出在具体在那个文件,哪个类下的哪个方法中的具体第几行,所以具体实现如下 try{ Integer adminID = Integer.parseInt(a ...