react navigation集成redux,tab间切换频繁刷新页面?

现在效果如下:

clipboard.png

log:

clipboard.png

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

阅读 3.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题