使用Redux处理嵌套导航器的正确方法

时间:2017-11-25 15:54:17

标签: reactjs react-native redux react-navigation

我正在尝试使用Redux在我的应用程序中实现嵌套导航器。但我很困惑,是否让每个导航器都有自己的减速器或只将减速器连接到Root Navigator。我在文档中找不到任何提及,所以我想在这里问一下。

这就是我的应用程序的工作方式:

StackNavigator -> RootNavigator
                  -- Splash Screen
                  -- Login Screen
                  -- Signup Screen
StackNavigator -> -- Main Naviagtor (After user logs in)
               StackNavigator -> -- Screen 1
                 TabNavigator -> -- Screen 2

我最初为每个导航器都有一个减速器,但它感觉不对。哈利。

更新:我只想在我的rootnavigator中保留一个reducer。这就是我尝试的方式。

我的Root Reducer:

import { NavigationActions } from 'react-navigation';

import RootNavigationStack  from '../../navigation/RootNavigationStack';

const INITIAL_STATE = RootNavigationStack.router.getStateForAction(NavigationActions.init());

export default (state = INITIAL_STATE, action) => {
    const nextState = RootNavigationStack.router.getStateForAction(action, state);

    return nextState || state
}

这是我配置RootNavigationState的方式:

const routeConfiguration = {
    RootScreenOne: {
        screen: Splash,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootScreenTwo: {
        screen: AppIntroSlider,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootScreenThree: {
        screen: SignUp,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootScreenFour: {
        screen: SignIn,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootScreenFive: {
        screen: ForgotPassword,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    RootScreenSix: {
        screen: Main,
        navigationOptions: {
            tabBarVisible: false
        }
    }
};

// going to disable the header for now
const stackNavigatorConfiguration = {
    headerMode: 'none',
    initialRouteName: 'RootScreenTwo'
};

export default RootNavigationStack = StackNavigator(routeConfiguration, stackNavigatorConfiguration);

Main是上面的MainNavigator,很简单:

const routeConfiguration = {
    MainScreenOne: {
        screen: CameraTab,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    MainScreenTwo: {
        screen: Home,
        navigationOptions: {
            tabBarVisible: false
        }
    }
};

// going to disable the header for now
const stackNavigatorConfiguration = {
    headerMode: 'none',
    initialRouteName: 'MainScreenTwo'
};

export default MainNavigationStack = StackNavigator(routeConfiguration, stackNavigatorConfiguration);

但我最终得到了以下错误。有什么想法吗?

enter image description here

0 个答案:

没有答案