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,就没有点击效果啊.这还真 ...
随机推荐
- 我的js为什么会触发两次
$(function() { $(".show").off("click").on("click",function(e){ e.preve ...
- 【ZJOI2017】树状数组
题目描述 漆黑的晚上,九条可怜躺在床上辗转反侧.难以入眠的她想起了若干年前她的一次悲惨的 OI 比赛经历.那是一道基础的树状数组题. 给出一个长度为 $n$ 的数组 $A$,初始值都为 $0$,接下来 ...
- BZOJ 2131 [scoi2010] 传送带
@(BZOJ)[三分法] Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段. 两条传送带分别为线段AB和线段CD. lxhgww在AB上的移动速度为P,在CD上的移 ...
- openssl转换各种证书的语法收集
参考网址:https://www.sslshopper.com/ssl-converter.html 个人总结:先找准要生成什么证书先,尤其是正规购买的流程与openssl生成的不一样,所以先确定是什 ...
- INDY9发送tstream
INDY9发送tstream 首先都要发送stream.Size, 这是必须的. // 服务端 AThread.Connection.WriteInteger(stream2.Size); AThre ...
- can-i-win(好)
https://leetcode.com/problems/can-i-win/ package com.company; import java.util.*; class Solution { / ...
- Utuntu 和 window共享文件
由于自己想用服务器跑代码,数据集和模型一般都在本机电脑上,用实验室服务器需要拷贝数据或者,在服务器上重新下载数据很麻烦 都在局域网内可以实现文件共享,代码和数据都在本地,共享给服务器,只需要使用服务器 ...
- HDU 5304(Eastest Magical Day Seep Group's Summer-环加外向树生成树计数)[Template:Kirchhoff矩阵]
Eastest Magical Day Seep Group's Summer Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 655 ...
- tcp ip协议笔记(1)——简单介绍
前言 本人记性不佳,看书健忘,以此笔记来记录看书后自己所知所想,已达到加深对tcp ip的理解.本笔记不过我看完书后自己所写的总结,权当是书后复习. 一.为什么会有tcp ip协议 ...
- react 调用 function 的写法 及 解决 react onClick 方法自动执行
1.react 调用方法的写法 (1)方式一 onClick={this.getFetchData.bind(this,item.id)} (2)方式二 getFetchData(e){ this.s ...