react-native-router-flux 使用详解（一）

个人主页：欢迎一起分享

链接：http://www.cherylgood.cn

 

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 <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      Scene>
    Router>
  }
} App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      Scene>
    Router>
  }
}

第二种使用方式：

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(
  <Scene key="root">
    <Scene key="login" component={Login} title="Login"/>
    <Scene key="register" component={Register} title="Register"/>
    <Scene key="home" component={Home}/>
  Scene>
);

/* ... */

class App extends React.Component {
  render() {
    return <Router scenes={scenes}/>
  }
} {Actions, Scene, Router} from 'react-native-router-flux';

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={Login} title="Login"/>
    <Scene key="register" component={Register} title="Register"/>
    <Scene key="home" component={Home}/>
  Scene>
);

/* ... */

class App extends React.Component {
  render() {
    return <Router scenes={scenes}/>
  }
}

定义好之后如何使用呢：

在任意地方通过导入

import {Actions} from 'react-native-router-flux' {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-native-router-flux 使用详解（二）writing。。。。。。

链接：http://www.cherylgood.cn