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