使用嵌套导航器之间的React-Navigation在React-Native Redux中导航

我从官方文档中了解了反应导航的工作原理 . 但是，当我必须处理Nested Navigators时，特别是在Big Apps中，我感到非常困惑 .

这是我在我的应用中实现的导航结构 .

• RootNavigation（Stack Navigator）

• 初始屏幕 - >默认屏幕

• 登录屏幕

• SignUp屏幕

• Main（堆栈导航器）

• 相机（堆栈导航器）

• 相机屏幕

• 预览屏幕

• 主页（选项卡导航器） - >默认屏幕

• 帖子（Stack Navigator） - 所有帖子屏幕 - >默认屏幕 - 显示评论帖子屏幕

• //其余类似于帖子（Stack Navigator）

现在，当我尝试从Splash Screen导航到Home检查用户是否已登录时，这是我尝试的方式 - > this.props.navigation.navigate ({routeName: 'RootScreenFour'})

我面临的问题是如何从所有帖子屏幕导航到相机屏幕

我试过这个 - > this.props.navigation.navigate ({routeName: 'CameraScreen'}) . 但没有任何反应 .

我甚至将应用程序连接到redux . 这是我的配置：

class Root extends Component {
    componentWillMount() {
        if (Platform.OS !== 'android') return;
        BackHandler.addEventListener('hardwareBackPress', () => {
            const { dispatch } = this.props;
            dispatch({ type: 'Navigation/BACK' });
            return true
        })
    }

    // when the app is closed, remove the event listener
    componentWillUnmount() {
        if (Platform.OS === 'android') BackHandler.removeEventListener('hardwareBackPress');
    }

    render() {
        // slap the navigation helpers on (critical step)
        const { dispatch, rootNavState } = this.props;
        const navigation = addNavigationHelpers({
            dispatch,
            state: rootNavState
        });
        return (
                <RootNavigationStack
                navigation={navigation} />
        )
    }
}

这是Root配置文件：

const routeConfiguration = {
        RootScreenOne: {
            screen: Splash,
            navigationOptions: {
                tabBarVisible: false
            }
        },
        RootScreenTwo: {
            screen: Signup,
            navigationOptions: {
                tabBarVisible: false
            }
        },
        RootScreenThree: {
            screen: Login,
            navigationOptions: {
                tabBarVisible: false
            }
        },
        RootScreenFour: {
            screen: Main,
            navigationOptions: {
                tabBarVisible: false
            }
        }
    };

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

export default RootNavigationStack = StackNavigator(routeConfiguration, stackNavigatorConfiguration);

我的主要配置：

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);

相机配置：

const routeConfiguration = {
    CameraScreenOne: {
        screen: Camera,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    CameraScreenTwo: {
        screen: Preview,
        navigationOptions: {
            tabBarVisible: false
        }
    }
};

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

export default CameraTabNavigationStack = StackNavigator(routeConfiguration, stackNavigatorConfiguration);

其余类似于在配置中显示没有意义 .

这就是我对redux的态度：

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

export default (state = INITIAL_STATE, action) => {
    let nextState;
    switch (action.type) {
        case 'GO_TO_CAMERA': {
         //   NavigationActions.navigate({ routeName: 'CameraScreenOne' });
            nextState = RootNavigationStack.router.getStateForAction(MainNavigationStack.router.getActionForPathAndParams('MainScreenOne'));

//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//This breaks the app. NavigationActions.navigate also does not work
            break;
        }

        default: {
            nextState = RootNavigationStack.router.getStateForAction(action, state);
            break;
        }
    }

    return nextState || state
}

如果有人可以帮助我 . 如何在深层嵌套导航器中从一个屏幕导航到另一个屏幕？

UPDATE: 将我的redux案例更新到下面

case 'GO_TO_CAMERA': {
            nextState = RootNavigationStack.router.getStateForAction(NavigationActions.navigate({routeName: 'CameraScreen'}));
            break;
        }

这也打破了应用程序 . 它进入了从摄像机屏幕返回的循环 .