React Native 导航堆栈屏幕混合

Question

当我尝试登录和注销时，我的堆栈存在一些逻辑问题。我目前正在使用 AsyncStorage 存储令牌，但是，这似乎是进入另一个导航堆栈的问题，我不太理解它。我已验证令牌是否按预期显示，并在触发登录/注销操作时被清除。

主导航堆栈：

 <NavigationContainer>
      <RootStack.Navigator>
        {
          token !== null ?
            (
              <>
                <RootStack.Screen name="tabnav" component={BottomTabNavigator} options={{ headerShown: false }} />
                <RootStack.Screen name="create-profile" component={CreateProfile} options={{ headerShown: true }} />
                <RootStack.Screen name="profile" component={Profile} options={{ headerShown: true }} />
              </>
            ) :
            (
              <>
                <RootStack.Screen name="test" component={UnauthenticatedRoutes} />
              </>
            )
        }
      </RootStack.Navigator>
    </NavigationContainer >

标签导航

const BottomTabNavigator = () => {
  const Tab = createBottomTabNavigator()
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        headerStyle: { backgroundColor: '#FB5B5A' },
        headerTintColor: 'white',
        headerTitle: () => (
          <Image
            resizeMode='center'
            style={{
              width: 20, height: 20, backgroundColor: '#FB5B5A'
            }}
            source={require('../assets/ios/rocket-lunch.png')}
          />
        ),
        tabBarActiveTintColor: '#FFF',
        tabBarActiveBackgroundColor: '#FB5B5A'
      }}>
      <Tab.Screen name="Dashboard" component={Dashboard} options={{
        tabBarIcon: ({ }) => (
          <Icon name="mobile-phone" size={30} />
        )
      }} />
      <Tab.Screen name="Settings" component={Settings} options={{
        tabBarIcon: ({ }) => (
          <Icon name="gear" size={30} />
        )
      }} />
    </Tab.Navigator>)

使用导航对象重新路由的登录

const Login = () => {
  const [email, onEmailChange] = useState('')
  const [password, onPasswordChange] = useState('')
  const navigation = useNavigation()
  const [login] = useMutation(LOGIN_MUTATION, {
    variables: {
      input: {
        email,
        password,
      }
    },
    onCompleted: async (newData) => {
      try {
        await AsyncStorage.setItem("token", newData.login.token)
        await AsyncStorage.setItem("email", newData.login.email)
        navigation.navigate('tabnav')
      } catch (e) {
        console.error(e)
      }
    }
  })

注销，使用导航对象重新路由

case 'Logout': {
      logoutUser()
      navigation.navigate('login')
      AsyncStorage.clear()
      break
    }

我收到这样的投诉：“任何导航器均未处理带有有效负载 {"name":"tabnav"} 的操作“NAVIGATE”，也为注销功能获取了该操作。这是一个计时问题吗？

Answer 1

不是时间问题。当您未登录时，您的导航器不会“看到”

tabnav

路线 - 它被三元

token !== null ?

从您的导航器中排除。当您登录时，情况正好相反 - 您无法看到未经身份验证的路由。因此您无法从一种切换到另一种。