Question

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

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

RootNavigation（Stack Navigator）
- 启动画面 - ＆gt;默认屏幕
- 登录屏幕
- SignUp Screen
- Main（Stack Navigator）
  - 相机（堆栈导航器）
    - 相机屏幕
    - 预览屏幕
  - 主页（Tab Navigator） - ＆gt;默认屏幕
    - 帖子（Stack Navigator） - 所有帖子屏幕 - ＆gt;默认屏幕 - 显示评论帖子屏幕
    - //其余类似于帖子（Stack Navigator）

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

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

我试过这个 - ＆gt; 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} /> ) } }。但没有任何反应。

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

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

这是Root配置文件：

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

相机配置：

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
}

其余类似于在配置中显示没有任何意义。

这就是我对redux的态度：

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

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

更新将我的redux案例更新为

{{1}}

这也破坏了应用程序。它进入了一个从摄像机屏幕返回的循环。

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

0 个答案: