createAppContainer

Question

export const AppLoginNavigator = createAppContainer(createSwitchNavigator({
Login: loginNavigator,
Main: mainNavigator,
}));
export const AppMainNavigator = createAppContainer(createSwitchNavigator({
Main: mainNavigator,
Login: loginNavigator,
}));

export default class App extends React.Component<Props, State>{
render() {
return (
this.state.isAuthed ? : < AppLoginNavigator/>
);
}
}
这里是appNavigator和app.tsx里面的代码，因为现在要做的是在app里判断是跳到主画面还是登陆画面，目前的做法是写了两个navigator然后在app里去判断，但是感觉这么做不规范，请问有没有我只写一个appNavigator然后判断后可以跳转到指定页面的办法呢？麻烦老师帮忙看一下

Answer 1

CrazyCodeBoy 2020-03-25 23:40:47

改成createSwitchNavigator试一下，类似课程中https://git.imooc.com/coding-304/GitHub_Advanced/src/master/js/navigator/AppNavigators.js 的实现：

const InitNavigator = createStackNavigator({
    WelcomePage: {
        screen: WelcomePage,
        navigationOptions: {
            headerShown: false,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
        },
    },
});
const MainNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            headerShown: false,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
        },
    },
    DetailPage: {
        screen: DetailPage,
        navigationOptions: {
            headerShown: false,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
        },
    },
}, {
    defaultNavigationOptions: {
        headerShown: false,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    },
});
export default createAppContainer(createSwitchNavigator({
    Init: InitNavigator,
    Main: MainNavigator,
}, {
    navigationOptions: {
        headerShown: false,
    },
}));

• 提问者 曹琛4160885 #1

  我这个就是用的switchnavigtor做的啊，现在是两个stackNavigator，因为要，但是最后封装成appContainer的时候要根据条件来判断哪个在前面，现在是写了两个appContainer，然后在app里判断调用哪一个，但是这样感觉不是正统的做法啊