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

问题描述

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

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

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

解决方法

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

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

根据您的代码，如果 isAuth 为 true，则仅包含主屏幕，如果为 false，则仅包含 Connexion 和 Incription，您需要包含所有三个 Screen 以便在它们之间导航

<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' },],})
              );
        });