React Native：带有负载的动作导航没有被任何导航器处理

Question

我正在尝试在验证电子邮件和密码后从登录屏幕导航到个人资料屏幕。其他一切都有效。我能够从 auth api 获取令牌，存储它并检索它。之后我无法导航到下一个屏幕，这会引发错误

这是我的代码：

更新：根据答案。我纠正了拼写错误。现在可以使用了！！

import * as React from 'react';
import { useState } from 'react';
import { ActivityIndicator, StatusBar, StyleSheet, TextInput, TouchableOpacity, Image, TouchableHighlight } from 'react-native';
import { Text, View } from '../components/Themed';
import * as SecureStore from 'expo-secure-store';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import navigation from '../navigation';

export default function LoginScreen({navigation}) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [data, setData] = useState([]);

  const doUserLogIn = async() => {
    try {
      const response = await fetch('http://some-server.de/api/login/?email='+email+'&password='+password, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        }
      });
      const json = await response.json();
      setData(json);
    } catch (e) {
      console.log('Error1:'+e);
    } finally {
      try{
        await SecureStore.setItemAsync('token', JSON.stringify(data.token));
        navigation.navigate('Profile');
      } catch(e) {alert('Error2:'+e); }
    }
  }
  return (
    <View  style={styles.container}>
    <StatusBar style="auto" />
    <View style={styles.inputView}>
      <TextInput
        placeholder="Email."
        onChangeText={(email) => setEmail(email)}
      />
    </View>

    <View style={styles.inputView}>
      <TextInput
        placeholder="Passwort."
        onChangeText={(password) => setPassword(password)}
      />
    </View>

    <TouchableOpacity style={styles.loginBtn} onPress={() => doUserLogIn()}>
      <Text style={styles.loginText}>Anmelden</Text>
    </TouchableOpacity>
    </View>
  );
}

下面是我的抽屉导航代码：

const Drawer = createDrawerNavigator();

function RootNavigator() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Anmelden" component={LoginScreen} />
      <Drawer.Screen name="Profil" component={ProfileScreen} />
      <Drawer.Screen name="Schichten" component={ShiftsScreen} />
      <Drawer.Screen name="Arbeitszeitbericht" component={TimelogScreen} />
    </Drawer.Navigator>
  );
}`

Answer 1

错误意味着 'Profile' 与当前页面不在同一屏幕堆栈中。如果您的堆栈由“已登录”分隔，那么您的登录堆栈将无法访问您的“已登录”堆栈。您可以设置一个条件：

userLoggedIn ? LoggedInStack : LoginStack

所以当用户登录时，它会自动切换到 LoggedInStack，它将“个人资料”作为其第一个屏幕，因此它会直接进入那里。

React Native：带有负载的动作导航没有被任何导航器处理

React Native: the action navigate with payload was not handled by any navigator

javascript

frontend

reactjs

react-native