如何在因变量而未定义的屏幕中导航？

Question

当我在登录屏幕时，我希望用户登录后它也被重定向到 'Home' 屏幕，但目前，我有一个错误告诉我主页未定义是什么正常...

{isAuth ? (
    <BottomTab.Screen name='Home' component={Home} />
): (
<>
    <BottomTab.Screen name='Connexion' component={Login} />
    <BottomTab.Screen name='Inscription' component={Register} />
</>

我还不知道如何使用上下文，但我认为这可能会简化事情，但与此同时，我希望能够从“登录”导航到“主页”。

Answer 1

这是因为你的情况没有添加Home栈

{isAuth ? (
    <BottomTab.Screen name='Home' component={Home} />
): (
<>
    <BottomTab.Screen name='Connexion' component={Login} />
    <BottomTab.Screen name='Inscription' component={Register} />
</>

根据您的代码，如果 isAuth 为真，则仅包括主屏幕；如果为假，则仅包括 Connexion 和 Incription，您需要包括所有三个屏幕才能在它们之间导航

<BottomTab.Screen name='Home' component={Home} />
<BottomTab.Screen name='Connexion' component={Login} />
 <BottomTab.Screen name='Inscription' component={Register} />

，你需要将你的条件移动到其他地方，比如点击按钮，在堆栈中我们也有 initialRouteProp。

  <Stack.Navigator
                    initialRouteName={isAuth() ? Home : Login}
                  
                >

对于 Tab Navigator，我们有 intialRoute 属性，您可以根据 isauth() 函数检查初始路由

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator initialRoute={isAuth() ? Home : Login}>

对于 MaterialTopTabNavigator，在 initialRouteName 中传递 isAuth 条件，如果为真，则将主屏幕设置为初始屏幕，如果为假，登录将是初始屏幕。


const BottomTab = createMaterialTopTabNavigator();

  <BottomTab.Navigator initialRouteName={isAuth ? Home : Login}>

    <BottomTab.Screen name='Home' component={Home} />
   <BottomTab.Screen name='Connexion' component={Login} />
   <BottomTab.Screen name='Inscription' component={Register} />

如果回家后没有登录和注册屏幕，您可以重置堆栈并删除不需要的路由

 this.props.navigation.dispatch(state => {
            // Remove the Login and Register from Stack from the stack
            const routes = state.routes.filter((r => r.name !== 'Connexion' && r => r.name !== 'Inscription' ));
        
            return CommonActions.reset({
              ...state,
              routes,
              index: routes.length - 1,
            });
          });

然后稍后在任何事件（例如注销）上单击您将读取登录路由

this.props.navigation.dispatch(
                CommonActions.reset({
                  index: 1,
                  routes: [
                    { name: 'Login' },
                    
                  ],
                })
              );
        });

如何在因变量而未定义的屏幕中导航？

How to navigate in a screen which is not defined because of a variable?

javascript

tabnavigator

reactjs

react-native

react-navigation