寫在前面
最近一直在學(xué)習(xí)react-native相關(guān)知識點(diǎn)两残，因需要使用react-navigation與redux集成兰怠，因此看了react-navigation官網(wǎng)關(guān)于redux集成的簡單demo椭住，但是因?yàn)槭菍懺谕粋€(gè)文件內(nèi)你辣，不利于理解與維護(hù)馅巷，因此，單獨(dú)分離出來到每個(gè)文件格粪。在網(wǎng)上搜了很多帖子，發(fā)現(xiàn)時(shí)間都比較長遠(yuǎn)氛改，并且很多都是1.x版本的集成方案帐萎，對最新的react-navigation 2.x版本來說，相關(guān)帖子感覺比較少胜卤，因此將其記錄下來疆导。如有錯(cuò)誤，請多多指教葛躏。
（ps: 默認(rèn)大家對于redux都很熟悉,不再介紹redux的相關(guān)知識）
相關(guān)插件及版本
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.4",
"react-navigation": "^2.18.2",
"react-navigation-redux-helpers": "^2.0.8",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6"
主要文件及目錄
project
│ App.js
│ index.js
└─── src
└─── store
│ │ index.js
└─── reducers
│ │ index.js
│ └─── Navigator
│ │ index.js
└─── components
│ index .js
分步指南
1. 安裝相關(guān)插件
2. components/index.js文件
根據(jù)react-navigationAPI構(gòu)建的底部導(dǎo)航條澈段，可根據(jù)自身需求自行使用。
const Navigator = createBottomTabNavigator(RouteConfigs, StackNavigatorConfig)
export default Navigator
3. store/index.js文件
這樣處理我相信對熟悉redux的人來說舰攒，應(yīng)該很容易就可以看出來败富，我們可以自定義middleware，利于擴(kuò)展摩窃。
import {createStore, applyMiddleware} from 'redux'
import logger from 'redux-logger'
import reducers from '../Reducers'
import { createReactNavigationReduxMiddleware, } from 'react-navigation-redux-helpers';
const middlewares = []
if (process.env.NODE_ENV === 'development') {
middlewares.push(logger)
}
const Navmiddleware = createReactNavigationReduxMiddleware(
"root",
state => state.nav,
);
middlewares.push(Navmiddleware)
const store = createStore(reducers, applyMiddleware(...middlewares))
export {store}
4.reducers/index.js文件
使用了combineReducers這個(gè)API兽叮，用于將拆分后 reducer 函數(shù)組成的對象，返回一個(gè)新的 Reducer 函數(shù)猾愿。同樣鹦聪，有利于我們繼續(xù)擴(kuò)展程序的Reducers。
import {combineReducers} from 'redux'
import navReducer from './Navigator'
const rootReducers = combineReducers({
nav:navReducer,
})
export default rootReducers
5.reducers/Navigator/index.js
Navigator的內(nèi)容很簡單蒂秘，根據(jù)官方文檔直接創(chuàng)建一個(gè)NavigationReducer,下方的注釋掉的代碼泽本，就是我在許多帖子內(nèi)看到的創(chuàng)建Reducer的方法，但是測試時(shí)是有紅屏報(bào)錯(cuò)的姻僧。
//import { NavigationActions } from 'react-navigation'
import Navigator from '../../components'
import { createNavigationReducer, } from 'react-navigation-redux-helpers';
// const initialState = Navigator.router.getStateForAction(NavigationActions.init())
export default navReducer = createNavigationReducer(Navigator);
// export default (state = navReducer, actions) => {
// const nextState = Navigator.router.getStateForAction(actions, state)
// return nextState || state
// }
結(jié)語:
以上內(nèi)容僅為自己的學(xué)習(xí)過程规丽，歡迎大家取其精華，丟其糟粕段化。若對以上內(nèi)容有不同見解嘁捷，歡迎一起探討。
企鵝號：1041415167 郵箱地址：zth1041415167@outlook.com
