[RN] 04 - React Navigation
react-navigation和react-router的对比:
- 支持的平台:
react-navigation:react-native
react-router:react-native
、reactjs
- 性质:
react-navigation:静态路由(需要在程序一处进行完整的路由配置才能使用)
react-router:动态路由(route
在需要使用的地方配置,可以把Route
当做React
中的组件)
Ref: 从react-navigation转react-router
目录篇:
Ref: react-native-router-flux使用技巧(API篇)
通用性:在最新的V4版本中是基于
react-navigation
实现的,如果使用过react-native-router-flux
那么使用新版本的学习成本会低很多;实用性:
react-navigation
虽然是官方推荐的导航库,但其库内部提供的,可以直接使用的功能很简单,有些还需要配合redux来实现需要的功能。而react-native-router-flux
基于react-navigation
实现其没有提供的APIpopTo(跳回指定页面)
,refresh(刷新页面)
,replace
,Modal(类似iOS从底部弹出个新页面的效果)
等常用到的功能,在下面的翻译中有详细说明;更新维护:这点上我很佩服库的作者,从V1更新到V4,从未背离作者的初衷,一直在对
react-native
的导航进行优化、封装,而且最让我佩服的一点是,作者好似将react-navigation
的Issues
全都翻看过,库里面将react-navigation
可能存在或者已经存在的坑都填上了,而且实时更新。如果有时间,可以查看一下CHANGELOG.md,里面有着全部的更新记录。
export default class App extends React.Component {
static propTypes = {
title: PropTypes.string,
}
render() {
return (
<Provider store={store}>
<Root>
<Router>
<View style={styles.container}>
<Scene key="test" component={Test} title="测试页面" />
<Scene key="chatlist" component={ChatList} title="消息" />
<Scene key="chat" component={Chat} title="聊天" getTitle={this.props.title} initial/>
<Scene key="login" component={Login} title="登录" backTitle="返回聊天" />
<Scene key="signup" component={Signup} title="注册" backTitle="返回聊天" />
</View>
</Router>
</Root>
</Provider>
);
}
}
此路由器的最重要的组件, 所有 <Scene>
组件必须要有一个唯一的 key
。
父节点<Scene>
不能将component
作为prop
,因为它将作为其子节点的组件。
initial |
boolean |
false |
设置为true 后,会默认显示该页面 |
component |
React.Component |
semi-required |
要显示的组件,定义嵌套时不需要Scene ,参见示例。 |
先学一学:
Ref: React Native Basics: Using react-native-router-flux
【共四篇,第三篇是tabs】
Ref: https://github.com/react-navigation/react-navigation
【感觉有了这个就差不多了,一个不错的库】
代码实践:
Ref: React Navigation: Stacks, Tabs, and Drawers
【质量高,有良心,有代码】
侧边栏导航
非常简单的抽屉导航介绍,未来讲解 react-native-router-flux 时作为对比。
- 属性介绍
- 代码分析
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict'; import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
Image,
TouchableOpacity,
DrawerLayoutAndroid,
ProgressBarAndroid,
View
} from 'react-native'; class DongFang1 extends Component {
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#ff0'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>我是抽屉!</Text>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth = {}
drawerPosition = {DrawerLayoutAndroid.positions.Right}
renderNavigationView= {() => navigationView}
> <View style={{flex: 1, alignItems: 'center'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>React Native World!</Text>
</View>
</DrawerLayoutAndroid>
);
}
} const styles = StyleSheet.create({ flex:{
flex:1,
},
}); AppRegistry.registerComponent('DongFang1', () => DongFang1);
[RN] 04 - React Navigation的更多相关文章
- [RN] React Navigation 使用中遇到的显示 问题 汇总
React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- RN 实战 & React Native 实战
RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React-native 导航插件React Navigation 4.x的使用
React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...
- react navigation goBack()返回到任意页面(不集成redux) 一
方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...
- React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
随机推荐
- 使用PD进行数据库建模时的问题
在PowerDesigner中建立好概念模型后,将其转为物理模型的时候出现如下错误提示: 前面四个是相同的问题,原因是由于没有修改默认设置.可以在Tools--->Model Options-& ...
- [开发笔记]-ASP.NET项目在IIS上使用虚拟目录
说一下我想要实现的效果: 假如我做一个图片展示类的网站,或者其他需要用户上传文件的网站,需要将用户上传的文件保存到一个Uploadfiles文件夹下,一般我们在做项目时用户上传的文件都是保存在网站项目 ...
- docker安装及加速配置
需要centos7版本,内核版本不低于3.10 [root@localhost ~]# uname -r3.10.0-514.el7.x86_64 第一步:更新当前软件:[root@localhost ...
- 跨域通信--Window.postMessage()
一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...
- ConsoleHelper 类
//Writes colored text to the console and allows to clear previously written lines //as long a not li ...
- 自然语言交流系统 phxnet团队 创新实训 项目博客 (十三)
对我们项目中的关键技术实现进行总结: 一.3DMax关键技术实现 1.一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. 2. 骨骼架设:首先对导入到3DM ...
- GLSL着色语言学习。橙皮书第一个例子GLSL+OpenTK+F#的实现。
Opengl红皮书有选择的看了一些,最后的讲着色语言GLSL的部分看的甚为不理解,然后找到Opengl橙皮书,然后就容易理解多了. 在前面,我们或多或少接触到Opengl的处理过程,只说前面一些处理, ...
- 【Html】div 加载 html页面的方法
做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:(亲测可行) <div class="main-contain ...
- struts2系列(一):struts2入门(struts2的产生、struts2的工作流程、搭建struts2开发环境)
一. struts2的产生 struts1的缺点: 1. ActionForm过多,而且这个ActionForm在很大程度上又和VO(POJO)重复 ...
- JUnit教程
测试是检查应用程序是否是工作按照要求,并确保在开发者水平,单元测试进入功能性的处理.单元测试是单一实体(类或方法)的测试. 单元测试在每一个软件公司开发高品质的产品给他们的客户是十分必要的. 单元测试 ...