react-native-router-flux 使用详解(一)

本贴最后更新于 2862 天前,其中的信息可能已经时过境迁

1、react-native-router-flux 是一个路由包

特性:

在一个中心区域定义可切换 scene 模块。在使用过程中,跟 react-native 提供的 navigator 的区别是你不需要有 navigator 对象。你可以在任意地方使用简单的语法去控制 scene 的切换,如:Actions.login({username, password}) or Actions.profile({profile}) or 甚至 Actions.profile(123)

所有的参数将被注入到 this.props 中给 Sene 组件使用。

功能和亮点:

高可定制的导航条:由 Scene 或者 Scene 的 state 去控制导航条的 show/hide

Tab Bar 支持使用 react-native-tabs

嵌套导航:每一个 tab 都可以有自己的导航,该导航被嵌套在 root 导航中。

使用 Action sheet 来自定义场景渲染器。

动态路由:动态路由将允许你通过应用的 state 去选着哪个 scene 将被渲染。

引入自己的 Reducer(我这样理解的:组装者,可以看 redux):可以为导航引入自己的 reducer state。

Reset History stack 重置历史栈:新的 reset 类型将提供清除历史栈河消除导航的返回按钮的功能。

More Powerful state control 更加强大的状态控制:在多个 scene 中可以有不同的 state。

第一步:安装 dependencies

npm i react-native-router-flux --save

使用方式一:

In your top-level index.js, define your scenes using the Scene component and pass it into the Router as children:

在你的 index.js 级别的文件中使用 Scene 组件定义你的 scenes,并且 Scene 组件作为 Router 的子节点。

因为后面 Scene 将由 Router 来控制其行为。

import {Scene, Router} from 'react-native-router-flux';

class App extends React.Component {
render() {
return

}
}

第二种使用方式:

Alternatively, you could define all of your scenes during compile time and use it later within Router:

你可以在编译期定义你所有的 scenes,并在后面的 Router 里面使用。

import {Actions, Scene, Router} from 'react-native-router-flux';

const scenes = Actions.create(

);

/* ... */

class App extends React.Component {
render() {
return
}
}

定义好之后如何使用呢:

在任意地方通过导入

import {Actions} from 'react-native-router-flux'

获得 Actions 对象,Actions 对象将是我们操作 Scenes 的遥控器。通过 Actions 我们可以向 Router 发出动作让 Router 控制 Scene 变化。

  • Actions.ACTION_NAME(PARAMS) will call the appropriate action and params will be passed to the scene.

  • 调用 Actions.ACTION_NAME(PARAMS)可以展示一个scene,参数将被注入scene中。

  • Actions.pop() will pop the current screen. It accepts following optional params:

  • Actions.pop()方法将会弹出当前的 scene,他接受如下可选参数

    • {popNum: [number]} allows to pop multiple screens at once
    • {popNum:[number]}允许你去一次弹出多个 scene
    • {refresh: {...propsToSetOnPreviousScene}} allows to refresh the props of the scene that it pops back to
    • {refresh:{...propsToSetOnPreviousScene}}允许你去刷新 pop 后的 scene。
  • Actions.refresh(PARAMS) will update the properties of the current screen.

  • Actions.refresh(PARAMS)会更新当前 scene 的属性。

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 385 关注
  • scene
    2 引用

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 76 回帖
  • OneDrive
    2 引用 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 109 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 393 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 2 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1440 引用 • 10067 回帖 • 493 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 2 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 642 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 2 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 205 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 3 关注
  • 安全

    安全永远都不是一个小问题。

    203 引用 • 818 回帖 • 1 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 646 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 662 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    57 引用 • 25 回帖 • 9 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 46 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 258 关注
  • gRpc
    11 引用 • 9 回帖 • 89 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    180 引用 • 821 回帖