1:安装组件package如下：
"dependencies": {
"immutable": "^3.8.2",
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-navigation": "^1.0.0-beta.15",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.6"
},
xiangmuwenjian.png
2:index引入根文件:
import { AppRegistry } from 'react-native';
import App from './app/root'
AppRegistry.registerComponent('xxx', () => App);
3:root =>'./app/root'文件如下
/**
* Created by wuyunqiang on 2017/10/9.
*/
import React from 'react';
import { Provider,connect } from 'react-redux';
import { StackNavigator,TabNavigator,addNavigationHelpers,NavigationActions} from 'react-navigation';
import configureStore from './store/configure-store';//配置reduce
import rootSaga from './sagas/index';//配置sagas异步操作
import AppNavigator from './router'
const store = configureStore();
GLOBAL.Log = console.log;
store.runSaga(rootSaga);//配置数据通过saga获取 然后通过reduce返回存储到store中 store作为唯一数据源
class NavigatorView extends React.Component {
render (){
//react-navigation与redux集成
return (
);
export default Root;
4：configure-store =>'./store/configure-store'
配置reduce数据
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';
import rootReducer from '../reducers/index';//引入根reduce
const middlewares = [];//中间插件
const { logger } = require('redux-logger');
// configuring saga middleware
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware);//放入saga中间插件
/* global __DEV__ */
if (__DEV__) {
middlewares.push(logger);
}
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
// install saga run
store.runSaga = sagaMiddleware.run;
store.close = () => store.dispatch(END);
return store;
}
5：/reducers/index =>rootReducer如下配置：
import { combineReducers } from 'redux';
import home from './home';
import xxx from './xxx';
const rootReducer = combineReducers({
nav:navigator,
home
});
export default rootReducer;
6:reducers/home里面引入immutable如下方式
/**
* Created by wuyunqiang on 2017/10/10.
*/
import { Map,is,fromJS } from 'immutable';
const initialState = Map({//初始化数据
isRefreshing: false,
loading: true,
isLoadMore: false,
noMore: false,
data: fromJS({}),
url:'',
params:{},
clickAd:false,
});
export default function home(state = initialState, action) {
switch (action.type) {
case ActionTypes.HOME_FETCH://网络获取数据
return state
.set('isRefreshing',true)
.set('loading',true)
.set('isLoadMore',action.isLoadMore);
case ActionTypes.HOME_RECEIVE:
const map1 = fromJS(action.data.result);//网络获取
const map2 = state.get('data');//本地已经有的数据
console.log('是否更新 reduce',!is(map1,map2));
if(is(map1,map2)){
return state
.set('isRefreshing',false)
.set('loading',false)
.set('isLoadMore',false);
}
return state
.set('data',map1)
.set('isRefreshing',false)
.set('loading',false)
.set('isLoadMore',false);
case ActionTypes.HOME_NOTIFICATION://点击事件
return state.set('clickAd',!state.get('clickAd'));
default:
return state;
}
}
7：reudcers/navigator 配置react-navigation的reudcer
import AppNavigator from '../router';
export default function navigator(state, action) {
console.log('navigator reduce',state,'action',action);
const newState = AppNavigator.router.getStateForAction(action, state);
return newState || state;
}
8：actions/home
/**
* Created by wuyunqiang on 2017/10/10.
*/
//请求数据的前发送的action
export function fetchData(isRefreshing , loading, isLoadMore = false) {
console.log('ActionTypes.HOME_FETCH');
return {
type: ActionTypes.HOME_FETCH,
isRefreshing,
loading,
isLoadMore
};
}
//请求结束 发送action
export function receiveData(data) {
console.log('ActionTypes.HOME_RECEIVE');
return {
type: ActionTypes.HOME_RECEIVE,
data,
};
}
//请求数据的action
export function requestData(url,params){
console.log('ActionTypes.HOME_REQUEST');
console.log('home url',url);
console.log('home params',params);
return {
type: ActionTypes.HOME_REQUEST,
url,
params
};
}
//请求数据的action
export function ClickNotification(){
return {
type: ActionTypes.HOME_NOTIFICATION,
};
}
9：'./sagas/index' =>rootSaga
import { fork } from 'redux-saga/effects';
import { watchRequestData } from './project';
export default function* rootSaga() {
// yield [fork(watchRequestTypeList), fork(watchRequestArticleList)];
yield [fork(watchRequestData)];//监听网络请求
}
完成。
不得不说一套配置过后，可以获取到react navigation的路由这个对于返回任意页的问题可以得到解决，而且整体的性能也是好的很多尤其的immutable的作用很明显。
有什么问题欢迎各位补充。
GitHub：https://github.com/wuyunqiang/ReactNativeUtil/issues
这是本人准备做的一个工具,以及bug的库。希望以后内容可以越来越丰富，会陆续补充在工作中遇到的有关react native的问题，欢迎大家将遇到的问题以及解决方法以issue的方式写下来做个记录。