Как мы можем использовать (или альтернативный метод) SwitchNavigator v4 (React Navigation) в последней версии React Navigation v6?

#javascript #reactjs #react-native #routes #navigation

Вопрос:

Я использую React navigation v4 с тех пор, как я пишу в react native. Недавно я переключился на v6 в новом проекте, когда мне нужно было настроить switchNavigation, как в v4, я обнаружил, что на их сайте нет надлежащей документации. Я попробовал несколько способов, но это не смогло привести меня к желаемому результату. У кого-нибудь из вас, ребята, есть свои настройки в v6 switchNavigation? Если это так, поделитесь и помогите мне.

Ответ №1:

Используйте асинхронное хранилище , контекстный код APIenter здесь

   <NavigationContainer theme={MyTheme}>
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        presentation: 'card',
      }}
      initialRouteName="Landing" //TODO: change to Landing or comment it ;)
    // detachInactiveScreens={true}
    >
      {props.shared.isloginHost == null ? (
        <>
          <Stack.Screen name="Landing" component={Landing} />
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
          <Stack.Screen name="SignUpDetails" component={SignUpDetails} />
          <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
          <Stack.Screen name="OTPPassword" component={OTPPassword} />
          <Stack.Screen name="ChangePassword" component={ChangePassword} />
          <Stack.Screen
            name="GuestBottomTab"
            component={GuestBottomTabs}
          />
        </>
      ) : (
        <>
          {props.shared.isloginHost == false ? (
            <Stack.Screen
              name="GuestBottomTabs"
              component={GuestBottomTabs}
            />
          ) : (
            <>
              {props.shared.hostplan == null ? (
                <Stack.Screen name="Insight" component={Insight} />
              ) : null}

              <Stack.Screen
                name="HostBottomTabs"
                component={HostBottomTabs}
              />
            </>
          )}
        </>
      )}
 

props.shared.isloginHost isloginHost-это состояние в общем редукторе, когда состояние равно нулю, пользователь получает доступ только к экрану авторизации