更多分享請看:http://cherylgood.cn
1缸濒、react-native-router-flux 是一個路由包
特性:
在一個中心區(qū)域定義可切換scene模塊足丢。在使用過程中,跟react-native提供的navigator的區(qū)別是你不需要有navigator對象绍填。你可以在任意地方使用簡單的語法去控制scene的切換霎桅,如:Actions.login({username, password})orActions.profile({profile})or 甚至Actions.profile(123)
所有的參數(shù)將被注入到this.props中給Sene組件使用。
功能和亮點:
高可定制的導(dǎo)航條:由Scene或者Scene的state去控制導(dǎo)航條的show/hide
Tab Bar支持使用react-native-tabs
嵌套導(dǎo)航:每一個tab都可以有自己的導(dǎo)航讨永,該導(dǎo)航被嵌套在root導(dǎo)航中滔驶。
使用Action sheet 來自定義場景渲染器。
動態(tài)路由:動態(tài)路由將允許你通過應(yīng)用的state去選著哪個scene將被渲染卿闹。
引入自己的Reducer(我這樣理解的:組裝者揭糕,可以看redux):可以為導(dǎo)航引入自己的reducer ?state。
Reset History stack重置歷史棧:新的reset 類型將提供清除歷史棧河消除導(dǎo)航的返回按鈕的功能锻霎。
More Powerful state control 更加強大的狀態(tài)控制:在多個scene中可以有不同的state著角。
第一步:安裝dependencies
npm i react-native-router-flux --save
使用方式一:
In your top-levelindex.js, define your scenes using theScenecomponent and pass it into theRouteras children:
在你的index.js級別的文件中使用Scene組件定義你的scenes,并且Scene組件作為Router的子節(jié)點旋恼。
因為后面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 withinRouter:
你可以在編譯期定義你所有的scenes,并在后面的Router里面使用冰更。
import {Actions, Scene, Router} from 'react-native-router-flux';
const scenes = Actions.create(
);
/* ... */
class App extends React.Component {
render() {
return
}
}
定義好之后如何使用呢:
在任意地方通過導(dǎo)入
import {Actions} from 'react-native-router-flux'
獲得Actions對象产徊,Actions對象將是我們操作Scenes的遙控器。通過Actions我們可以向Router發(fā)出動作讓Router控制Scene變化蜀细。
Actions.ACTION_NAME(PARAMS)will call the appropriate action and params will be passed to the scene.
調(diào)用Actions.ACTION_NAME(PARAMS)可以展示一個scene舟铜,參數(shù)將被注入scene中。
Actions.pop()will pop the current screen. It accepts following optional params:
Actions.pop()方法將會彈出當前的scene奠衔,他接受如下可選參數(shù)
{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。痊夭。刁岸。。她我。难捌。