- 安装以下package
cnpm install --save react-navigation-redux-helpers
cnpm install --save redux
cnpm install --save react-redux
cnpm install --save redux-devtools
或者运行
yarn add react-navigation-redux-helpers
yarn add redux
yarn add react-redux
yarn add 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);
// Simply return the original `state` if `nextState` is null or undefined.
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))