现在效果如下:
log:
root页面
/**
* Created by wuyunqiang on 2017/10/9.
*/
import './assets'
import './utils';
import './actions/ActionTypes'
import Navigator from './navigator';
import React from 'react';
import { View, StatusBar } from 'react-native';
import { Provider,connect } from 'react-redux';
import { StackNavigator,TabNavigator,addNavigationHelpers} from 'react-navigation';
import configureStore from './store/configure-store';//配置reduce
import rootSaga from './sagas/index';//配置sagas异步操作
import Router from './router'
const store = configureStore();
// run root saga
store.runSaga(rootSaga);//配置数据通过saga获取 然后通过reduce返回存储到store中 store作为唯一数据源
class navigatorView extends React.Component {
render (){
// react-navigation与redux集成
return (<Router
navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav
})}/>)
}
}
/**
* 注入数据流
* **/
const mapStateToProps = state => ({
nav: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(navigatorView);
const Root = () => (<Provider store={store}>
<AppWithNavigationState />
</Provider>);
export default Root;
configureStore
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';
import rootReducer from '../reducers/index';
const middlewares = [];
const { logger } = require('redux-logger');
// configuring saga middleware
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware);
/* 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;
}
reducer
import { combineReducers } from 'redux';
import {Map, fromJS} from 'immutable';
import home from './home';
import project from './project';
import navigator from './navigator';
const immutableStateContainer = Map();
const getImmutable = (child, key) => child ? child.get(key) : void 0;
const setImmutable = (child, key, value) => child.set(key, value);
const rootReducer = combineReducers({
nav:navigator,
home,
project,
});
export default rootReducer;
navigator:
export default function navigator(state, action) {
console.log('navigator state',state);
console.log('navigator newState',newState);
const newState = AppNavigator.router.getStateForAction(action, state);
return newState || state;
router
import React, {Component} from 'react';
import {
Platform,
View,
I18nManager,
TouchableOpacity,
Easing,
StatusBar,
Animated,
DeviceEventEmitter,
Image
} from 'react-native';
import AppImages from './assets'
import { StackNavigator,TabNavigator } from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import Icon from 'react-native-vector-icons/Ionicons';
import { connect } from 'react-redux';
//containers
import HomeContainer from './containers/HomeContainer'
import ProjectContainer from './containers/ProjectContainer'
import ProfileContainer from './containers/ProfileContainer'
import Launch from '../App'
import NoNetWork from './components/NoNetWork'
import Splash from './pages/Splash'
const tabbaroption = {
activeTintColor: 'red',
inactiveTintColor: '#999999',
showIcon: true,
style: {
justifyContent:'center',
alignItems:'center',
backgroundColor:'#fff'
},
indicatorStyle: {
opacity: 0
},
iconStyle:{
paddingBottom:0,
paddingTop:0,
padding:0,
marginTop:0,
marginBottom:0,
width:SCALE(40),
height:SCALE(40),
},
labelStyle:{
paddingTop:0,
paddingBottom:SCALE(10),
marginTop:0,
padding:0,
fontSize:FONT(10),
color:Color.C888888
},
tabStyle: {
height:Platform.OS==='ios'?SCALE(98):SCALE(100),
justifyContent:'center',
alignItems:'center'
}
};
//我发起的请假选项
const TabContainer = TabNavigator(
{
Home: { screen: HomeContainer },
Project: { screen: ProjectContainer },
Profile: { screen: ProfileContainer },
},
{
lazy: true,
swipeEnabled: false,
tabBarPosition: 'bottom',
animationEnabled: true,
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
tabBarOptions: tabbaroption});
const Routes = {
Root:{screen: TabContainer,},
Launch:{screen:Launch,},
Splash:{screen:Splash,},
NoNetWork:{screen:NoNetWork},
};
const AppNavigator = StackNavigator(
{
...Routes,
Index: {
screen: TabContainer,
},
},
{
initialRouteName: 'Index',
headerMode: 'screen',
transitionConfig: TransitionConfiguration,
navigationOptions: ({navigation}) => StackOptions({navigation}),
}
);
export default AppNavigator;
react": "16.0.0-beta.5"
react native:0.49.3
react navigation:^1.0.0-beta.13