在 React Native 中导航或替换时导航不起作用

Question

我在反应本机应用程序中实现登录/注册。我遇到 NAVIGATOR 问题。 IT 说：任何导航器均未处理有效负载 {"name":"HomeTab"} 的“NAVIGATE”操作。您有一个名为“HomeTab”的屏幕吗？如果我给出名称，则相同：“HOME”。 这是我的 app.js 文件。用户通过身份验证后应呈现选项卡导航，否则我需要显示登录页面。

const MainTabs = ({ navigation }) => {
  const { logout, removeToken } = useContext(UserContext);

  const handleLogout = async () => {
    await removeToken();
    navigation.replace('Login'); // Use replace instead of navigate
  };

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} options={{
        headerShown: true,
        headerRight: () => (
          <Button
            onPress={handleLogout}
            title="Logout"
            color="#000"
          />
        ),
      }}/>
      <Tab.Screen name="Calendar" component={CalendarScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

const AuthStack = () => {
  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
};

const AppNavigator = () => {
  const { user} = useContext(UserContext);

  return (
    <Stack.Navigator>
      {user ? (
        <Stack.Screen
          name="MainTabs"
          component={MainTabs}
          options={{ headerShown: false }}
        />
      ) : (
        <Stack.Screen
          name="Auth"
          component={AuthStack}
          options={{ headerShown: false }}
        />
      )}
    </Stack.Navigator>
  );
};

const App = () => {

  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default () => (
  <UserProvider>
    <App />
  </UserProvider>
);

这是登录页面。

const LoginScreen = ({navigation}) => {
  const [identifier, setIdentifier] = useState('');
  const [password, setPassword] = useState('');
  const {login: loginContext} = useContext(UserContext);

  const handleLogin = async () => {
    try {
      const response = await login(identifier, password);
      loginContext(response.jwt); // Update context with the token
      navigation.navigate('HomeTab'); // Navigate to HomeTab in MainTabs
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  useEffect(() => {
    const checkUser = async () => {
      const token = await AsyncStorage.getItem('userToken');
      if (token) {
        navigation.navigate('HomeTab');
      }
    };
    checkUser();
  }, [navigation]);

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Username or Email"
        value={identifier}
        onChangeText={setIdentifier}
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        style={styles.input}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
      <Button
        title="Register"
        onPress={() => navigation.navigate('Register')}
      />
    </View>
  );
};

Answer 1

  const handleLogin = async () => {
try {
  const response = await login(identifier, password);
  loginContext(response.jwt); // Update context with the token
  navigation.navigate('HomeTab'); // Navigate to HomeTab in MainTabs
} catch (error) {
  console.error('Login error:', error);
}

};

在此代码中，您应该使用主名称 MainTabs，这是选项卡组件的名称，因此代码应该是。

  const handleLogin = async () => {
try {
  const response = await login(identifier, password);
  loginContext(response.jwt); // Update context with the token
  navigation.navigate('MainTabs'); // Navigate to HomeTab in MainTabs
} catch (error) {
  console.error('Login error:', error);
}

};

它应该可以工作。