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

问题

When I am in the login screen I would like once the user logs in that it is also redirected to the 'Home' screen but currently, I have an error telling me that the Home is not defined what is normal ...

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

I don't really know how to use contexts yet but I think it might simplify the thing but in the meantime I would just like to be able to navigate from Login to Home.

回答1:

This is because Home stack is not added due to your condition

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

According to your code , if isAuth true, you only include Home Screen and if it is false you only include Connexion and Incription, you need to include all three Screen in order to navigate between them

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

, you need to move your condition to some other place, like on button click, also in stack we have initialRouteProp.

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

For Tab Navigator we have intialRoute prop, you can check intial route based on your isauth() function

const Tab = createBottomTabNavigator();

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

For MaterialTopTabNavigator , in initialRouteName i pass isAuth condition , if true it set Home screen as initial screen , if false Login will be the initial screen.


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} />

If don't Login and register screens on after home, you reset the stack and remove routes you don't need

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

then on later on any event such as Logout click you cam readd Login Route

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

来源：https://stackoverflow.com/questions/65831263/how-to-navigate-in-a-screen-which-is-not-defined-because-of-a-variable

标签

javascript

reactjs

react-native

react-navigation

tabnavigator