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

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

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 回帖 • 368 关注
  • scene
    2 引用

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 262 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 2 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 542 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 832 关注
  • 游戏

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

    188 引用 • 832 回帖 • 1 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 12 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 630 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 564 关注
  • V2Ray
    1 引用 • 15 回帖 • 5 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 558 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 827 关注
  • Elasticsearch

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

    117 引用 • 99 回帖 • 203 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 89 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 268 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 6 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖 • 2 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    2 引用 • 32 回帖 • 1 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 8 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    292 引用 • 4495 回帖 • 664 关注
  • Flutter

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

    39 引用 • 92 回帖 • 13 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 1 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 82 关注