下載安裝

• 安裝導(dǎo)航 react-navigation
• 安裝 react-redux
• 安裝 中間件 redux-logger redux-thunk

導(dǎo)航簡(jiǎn)單示例

• app.router.js 文件

import IndexScreen  from  'xxx'  //隨便寫一個(gè)頁(yè)面
import { StackNavigator } from 'react-navigation';

export const AppNavigator = StackNavigator({
    Index: { screen: IndexScreen },
},
    {
        navigationOptions: {  // 屏幕導(dǎo)航的默認(rèn)選項(xiàng), 也可以在組件內(nèi)用 static navigationOptions 設(shè)置(會(huì)覆蓋此處的設(shè)置)
            // 導(dǎo)航欄相關(guān)設(shè)置項(xiàng)
            headerBackTitle: null,  // 左上角返回鍵文字
        },
        cardStack: {
            gesturesEnabled: true
        },
        mode: 'card',  // 頁(yè)面切換模式, 左右是card(相當(dāng)于iOS中的push效果), 上下是modal(相當(dāng)于iOS中的modal效果)
        headerMode: 'screen',
    }
);

• app.reducer.js 文件

import { AppNavigator } from './app.router';
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Index'));

export default navReducer = (state = initialState, action) => {
    const nextState = AppNavigator.router.getStateForAction(action, state);
    return nextState || state;
};

• app.js 文件

import React, { Component } from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { AppNavigator } from './app.router';
import { connect } from 'react-redux';
class App extends Component {
    render() {
        return(
        <AppNavigator screenProps={this.state.params} navigation={addNavigationHelpers({
            dispatch: this.props.dispatch,
            state: this.props.nav,
        })} />
        );
    }
}
mapStateToProps = (store) => ({
    nav: store.navReducer,
});
export const AppState = connect(mapStateToProps)(App);

• router.redux.js

import thunkMiddleware from 'redux-thunk';  // 異步
import { createLogger } from 'redux-logger';  // log
import { createStore, applyMiddleware,combineReducers } from 'redux';

import navReducer from './app/app.reducer'; //導(dǎo)航

let middleware = [thunkMiddleware];
if(__DEV__){
    let loggerMiddleware = createLogger();
    middleware=[...middleware,loggerMiddleware];
}else {
    middleware=[...middleware];
}
const todoStore = combineReducers({
    navReducer,
});
export const store = createStore(
    todoStore,
    applyMiddleware(...middleware)
);

• index.js 文件

import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { AppState } from './app/app';
import { store } from './Redux/router.redux';
class Router extends Component {
 render() {
        return (
            <Provider store={store}>
                <AppState />
            </Provider>
        );
    }
}

AppRegistry.registerComponent('RNTEST', () => Router);

正式使用

• 遇到的問(wèn)題，導(dǎo)航無(wú)法解析tab,stack嵌套，或者draw嵌套
• android使用導(dǎo)航redux之后，只要應(yīng)用沒(méi)從后臺(tái)結(jié)束，導(dǎo)航state會(huì)保持上一次的狀態(tài)