安装以下package
cnpm install --save react-navigation-redux-helpers
cnpm install --save redux
cnpm install --save react-redux
cnpm install --save redux-devtools
App.js
import React from 'react'
import { createStackNavigator, createSwitchNavigator} from 'react-navigation'
import Welcome from './pages/Welcome'
import Home from './pages/Home'
import Detail from './pages/Detail'
import { reduxifyNavigator, createReactNavigationReduxMiddleware} from 'react-navigation-redux-helpers'
import { connect, Provider} from 'react-redux'
import store from './js/store'
const WelcomeNavigator = createStackNavigator (
{
Welcome: {
screen: Welcome,
navigationOptions: {
header: null
}
}
}
)
const StackNavigator = createStackNavigator (
{
Home: {
screen: Home,
navigationOptions: {
header: null
}
} ,
Detail: {
screen: Detail,
navigationOptions: {
title: "详情"
}
}
}
)
export const SwitchNavigator = createSwitchNavigator (
{
Init: WelcomeNavigator,
Main: {
screen: StackNavigator,
navigationOptions: {
header: null
}
}
} ,
{
initialRouteName: "Main"
}
)
export const middleware = createReactNavigationReduxMiddleware (
"root" ,
state => state. nav,
)
const RN = reduxifyNavigator ( SwitchNavigator, "root" )
const mapStateToProps = ( state) => ( {
state: state. nav,
} )
const AppWithNavigationState = connect ( mapStateToProps) ( RN )
export default class App extends React. Component {
render ( ) {
return < Provider store= { store} >
< AppWithNavigationState/ >
< / Provider>
}
}
reducer.js
import { combineReducers} from 'redux'
import theme from './theme'
import { SwitchNavigator} from '../../App'
const initialState = SwitchNavigator. router. getStateForAction ( AppNavigator. router. getActionForPathAndParams ( 'Init' ) ) ;
const navReducer = ( state = initialState, action) => {
const nextState = SwitchNavigator. router. getStateForAction ( action, state) ;
return nextState || state;
} ;
const index = combineReducers ( {
nav: navReducer,
theme
} )
export default index
store.js
import { applyMiddleware, createStore} from 'redux'
import thunk from 'redux-thunk'
import reducers from '../reducer'
import { middleware} from '../../App'
const middlewares = [
middleware
]
export default createStore ( reducers, applyMiddleware ( ... middlewares) )