React Native之router-flux的使用

時間 2019-11-17

標籤 react native router flux 使用欄目 React 简体版

原文原文鏈接

相關文檔:html

Redux官方:http://redux.js.org/react

RNRF(React-Native-Router-Flux)官方:https://github.com/aksonov/react-native-router-fluxandroid

1.Router git

Property	Type	Default	Description
reducer	`function`		optional user-defined reducer for scenes, you may want to use it to intercept all actions and put your custom logic
createReducer	`function`		function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below
other props			all properties that will be passed to all your scenes
children		required (if no scenes property passed)	Scene root element
scenes	`object`	optional	scenes for Router created with Actions.create. This will allow to create all actions BEFORE React processing. If you don't need it you may pass Scene root element as children
getSceneStyle	`function`	optional	Optionally override the styles for NavigationCard's Animated.View rendering the scene.
backAndroidHandler	`function`	optional	Optionally override the handler for `BackAndroid`, return `true` to stay in the app or return `false` to exit the app. Default handler will pop a scene and exit the app at last when the back key is pressed on Android.
onBackAndroid	`function`	optional	Get called after back key is pressed and a scene is poped, won't affect the default behavior.
onExitApp	`function`	optional	Optionally override the default action after back key is pressed on root scene. Return `true` to stay, or return `false` to exit the app.github

2.Switchapp

必需要使用tabs={true},不然會找不到unloginCenter的錯誤異步

<Scene
                            key="switch"
                            component={connect(state=>({login:state.loginReducer.login}))(Switch)}
                            title={Consts.UserCenterPage}
                            tabs={true}
                            unmountScenes
                            // hideOnChildTabs
                            selector={props=>props.login?'tabbar':'unloginCenter'}
                        >
    <Scene key="tabbar" />
    <Scene key="unloginCenter" />
</Scene>

使用unmountSceneside

執行順序:

tabbar

unloginCenter

unloginCenter
-----登陸

tabbar

不使用unmountScenes

unloginCenter

unloginCenter
-----登陸

tabbar

tabbar

3.Scene

既能夠做爲場景又能夠用做場景容器,若是未設置Component時,是做爲容器使用的,加載子節點中包含initial屬性的Scene,若是沒有任何Scene有該屬性,則加載第一個Scene

容器中的Scene能夠相互跳轉

clone屬性用用於不一樣層級之間的跳轉

Property	Type	Default	Description
key	`string`	required	Will be used to call screen transition, for example, `Actions.name(params)`. Must be unique.
component	`React.Component`	semi-required	The `Component` to be displayed. Not required when defining a nested `Scene`, see example. If it is defined for 'container' scene, it will be used as custom container `renderer`
initial	`bool`	false	Set to `true` if this is the initial scene
type	`string`	`ActionConst.PUSH`or `ActionConst.JUMP`	Defines how the new screen is added to the navigator stack. One of `ActionConst.PUSH`, `ActionConst.JUMP`, `ActionConst.REPLACE`, `ActionConst.RESET`. If parent container is tabbar (tabs=true), `ActionConst.JUMP` will be automatically set.
clone	`bool`		Scenes marked with `clone` will be treated as templates and cloned into the current scene's parent when pushed. See example.
passProps	`bool`	false	Pass all own props (except style, key, name, component, tabs) to children. Note that passProps is also passed to children.

在Component中獲取Scene的屬性和方法(https://github.com/aksonov/react-native-router-flux/issues/1109)

var tabSceneMenu = {
      onLeft :()=>{ MenuActions.openMenu() },
      leftButtonImage:leftImage,
      getLeftTitle:this.getLeftTitle, 
      getRightTitle:this.getRightTitle,
      onRight :()=>{MenuActions.openRightMenu();} 
    }

<Scene key="newTab" {...tabSceneMenu} passProps={true} component={YourComponent} title="Title" ></Scene>

直接在Component中獲取當前的Scene

https://github.com/aksonov/react-native-router-flux/blob/master/docs/REDUX_FLUX.md

4.Modal

To display a modal use Modal as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed). For example:

這種用法主要添加一個全局的Modal對話框,該Scene能夠覆蓋在全部的其餘Scene之上(注意:必須設置該Scene的position:'absolute',不然會該Scene會從底部顯示擠佔屏幕)

import StatusModal from './components/StatusModal'

<Router>
  <Scene key="modal" component={Modal} >
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
  </Scene>
</Router>

5.Actions

RNRF裏面的類,平時主要有三個操做

Actions.ACTION_NAME(PARAMS) will call the appropriate action and params will be passed to the scene.all params will be part of  for given Scene component
Actions.pop() will pop the current screen. It accepts following optional params:
{popNum: [number]} allows to pop multiple screens at once
{refresh: {...propsToSetOnPreviousScene}} allows to refresh the props of the scene that it pops back to,會致使上一個界面從新render一次,即便這個屬性前面不存在,只pop的話不會從新render
Actions.refresh(PARAMS) will update the properties of the current screen.this.props

退出當前頁面,並刷新上一頁面

Actions.pop({ refresh: { test: true }})

https://github.com/aksonov/react-native-router-flux/issues/1381

同時操做的問題(設置setTimeout能夠解決)

https://github.com/aksonov/react-native-router-flux/issues/1266

https://github.com/aksonov/react-native-router-flux/issues/1341(解決辦法)

獲取navigationnStack和棧頂的Scene(官方沒實現)

https://github.com/aksonov/react-native-router-flux/issues/1345(測試,暫未發現問題)

6.可設置的全局屬性

注意:Router Scene中的屬性修改在Hot Reloading中無效的,必須Reload

navigationBarStyle titleStyle在Router中設置,全局生效,能夠在Scene中進行覆蓋

7.清空Reducer的State

發生狀況:提出頁面後,須要清空connect的Reducer中的State,不然,下次進入的時候,仍是顯示上次的數據

https://www.v2ex.com/t/300257

http://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store/39581166#39581166

目前給出的方案是:在退出組件的componentWillUnmount事件中,發送一個action,通知reducer還原對應的屬性

8.About Key xxx is already defined

There is no way to prevent Router re-render IF you wrap it under a Provider AND listen updates from redux. It is a nature by design.

the point how to prevent this, is: Router should render once and just once it means:

If you didn't connect to redux at all, it works fine since your Router would not be triggered by any of updates from redux.

Also, you can connect() Router to redux to get a dispatch() method props but you can NOT listen to another props.
簡單的說,就是別再有Router的界面connect的時候綁定屬性,由於這樣會引起componentWillReceiveProps....-render,而Router是隻能渲染一次的,這個在設計的時候就這樣
因此能夠綁定事件,但千萬別綁定屬性

9.tabbar

Every tab has its own navigation bar. However, if you do not set its parent <Scene tabs={true} /> with hideNavBar={true}, the tabs' navigation bar will be overrided by their parent.

<Scene key="myTabBar" tabs={true} hideNavBar tabBarStyle={style.tabBarStyle}>
  <Scene 
    key="myTab" 
    title="My Tab" 
    icon={MyTabIcon} 
    onPress={()=> {
      Actions.myTab_1({type: ActionConst.REFRESH});
    }}
   >
      <Scene key="myTab_1" component={MyTabComponent} hideNavBar/>
  </Scene>
</Scene>

主要講一下NavBar和TabBar,若是這種寫的話,會發現,界面裏面的內容直接覆蓋到頂部的tabbar了,能夠在每一個tab頁設置marginBottom,或者用更通用的,對router設置getSceneStyle

// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
    const style = {
        flex: 1,
        backgroundColor: '#fff',
        shadowColor: null,
        shadowOffset: null,
        shadowOpacity: null,
        shadowRadius: null,
    };
    if (computedProps.isActive) {
        style.marginTop = computedProps.hideNavBar ? (Platform.OS==='android'?0:20) : (Platform.OS==='android'?54:64);
        style.marginBottom = computedProps.hideTabBar ? 0 : 50;
    }
    return style;
};