react-navigation和react-router的对比:

  • 支持的平台:
    react-navigationreact-native
    react-routerreact-nativereactjs
  • 性质:
    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(刷新页面)replaceModal(类似iOS从底部弹出个新页面的效果)等常用到的功能,在下面的翻译中有详细说明;

  • 更新维护:这点上我很佩服库的作者,从V1更新到V4,从未背离作者的初衷,一直在对react-native的导航进行优化、封装,而且最让我佩服的一点是,作者好似将react-navigationIssues全都翻看过,库里面将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的更多相关文章

  1. [RN] React Navigation 使用中遇到的显示 问题 汇总

    React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d

  2. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  3. RN 实战 & React Native 实战

    RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...

  4. react-native导航器 react navigation 介绍

    开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...

  5. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  6. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  7. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  8. react navigation goBack()返回到任意页面(不集成redux) 一

    方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...

  9. React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

随机推荐

  1. Android(我还是个菜鸟)——UI-开源框架ImageLoader的完美例子

    开源框架ImageLoader 可在文件里面找——Desktop.zip(原文件为jar格式) 使用这个框架的好处: 让图片能在异步加载更加流畅,可以显示大量图片,在拖动ListView的时候不会出现 ...

  2. UI设计 - 手机列表风格总结

    1       概述 1.1     背景 对UI设计过程中常见的列表风格进行总结.希望对后续的设计工作有所帮助 1.2     预期读者 UI设计师,用户体验设计师,项目经理,美工 1.3     ...

  3. PHP经纬度 测距

    /** *求两个已知经纬度之间的距离,单位为米 *@param lng1,lng2 经度 *@param lat1,lat2 纬度 *@return float 距离,单位米 **/ function ...

  4. Java中的Set与List 的关系与区别

    两个接口都是继承自Collection. List (inteface) 次序是List 的最重要特点,它确保维护元素特定的顺序. --ArrayList 允许对元素快速随机访问. --LinkedL ...

  5. 如何通过使用窗体身份验证和 Visual C#.NET 对 Active Directory 验证身份

    本分步指南演示如何在 ASP.NET 应用程序如何使用窗体身份验证允许用户使用轻型目录访问协议 (LDAP),对 Active Directory 进行验证.经过身份验证的用户重定向之后,可以使用Ap ...

  6. 自然语言交流系统 phxnet团队 创新实训 个人博客 (十二)

    在本项目中关于天空盒子的使用的配置方法: 给场景添加天空盒  第二种方式   在菜单栏中选择:Edit->Render Setting,在保证不在选择场景中其它文件的前提下,Inspector面 ...

  7. selenium(java)处理HTML5的视频播放

    大多数浏览器使用控件(如 Flash) 来播放规频,但是,不同的浏览器需要使用不同的插件.HTML5 定义了一个新的元素<video>,,指定了一个标准的方式来嵌入电影片段.IE9+.Fi ...

  8. 用OpenGL绘制平滑着色的三角形与相交区域的混合着色

    一.三角形的绘制 在OpenGL中,面是由多边形构成的.三角形可能是最简单的多边形,它有三条边.可以使用GL_TRIANGLES模式通过把三个顶点连接到一起而绘出三角形. 使用GL_TRIANGLE_ ...

  9. e792. 建立一个包括所有数据的SpinnerListModel

    By default, if the user is browsing the values in a SpinnerListModel, the iteration stops when eithe ...

  10. 嵌入式开发之uart---编程

    下位机往上位机发送串口数据都是漫漫的这个包,但是win上位机往下位机发数据时,得分包大小,下位机收到的不一从1到200左右,大部分为100左右 http://bbs.csdn.net/topics/3 ...