任何导航器都未处理有效负载的操作'NAVIGATE'

Question

这是我的App.js:

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import HomeScreen from "./HomeScreen";
import LoginScreen from "./LoginScreen";
import AsyncStorage from "@react-native-async-storage/async-storage";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName={
AsyncStorage.getItem("isLoggedIn?") === "true"
? "LoginScreen"
: "HomeScreen"
}
screenOptions={{ headerShown: false }}
>
<Stack.Screen component={LoginScreen} name="LoginScreen" />
<Stack.Screen component={HomeScreen} name="HomeScreen" />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;

这是我的homesscreen .js:

import AsyncStorage from "@react-native-async-storage/async-storage";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useRef, useState } from "react";
import {
Image,
ScrollView,
StyleSheet,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import Message from "./Message";
export default function HomeScreen({ navigation }) {
const refForScrollView = useRef();
const [nameValue, setNameValue] = useState("");
const [tempNameValue, setTempNameValue] = useState("");
useEffect(() => {
refForScrollView.current.scrollToEnd();
AsyncStorage.getItem("name")
.then((name) => setTempNameValue(name))
.catch((e) => console.log(e));
navigation.navigate("Login");
}, []);
const data = [
{ message: tempNameValue },
{ message: "heavy rider" },
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
{
message: "My Name Is Dev",
},
];
return (
<View style={styles.container}>
<Image
source={require("./assets/official-whatsapp-background-image1.jpg")}
style={styles.poti}
/>
<View style={styles.messages}>
<ScrollView ref={refForScrollView}>
{data.map((user) => {
return <Message message={user.message} />;
})}
</ScrollView>
</View>
<View style={styles.bottom}>
<TextInput placeholder="Enter Your Message" style={styles.input} />
<TouchableOpacity style={styles.sendButton}>
<Icon name="md-send" style={{ color: "white", fontSize: 18 }} />
</TouchableOpacity>
</View>
<StatusBar hidden />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
alignContent: "center",
},
input: {
display: "flex",
width: "80%",
borderRadius: 200,
paddingLeft: 12,
height: 45,
backgroundColor: "#f1f1fa",
},
bottom: {
display: "flex",
justifyContent: "space-between",
flexDirection: "row",
bottom: 0,
position: "absolute",
padding: 10,
},
poti: {
width: "100%",
height: "100%",
},
sendButton: {
backgroundColor: "#3894A3",
borderRadius: 100,
height: 50,
width: 50,
paddingTop: 15,
paddingLeft: 17,
position: "relative",
},
messages: {
height: "89%",
position: "absolute",
top: 0,
width: "100%",
},
});

下面是我的LoginScreen.js:

import AsyncStorage from "@react-native-async-storage/async-storage";
import { StatusBar } from "expo-status-bar";
import { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";
import Dialog from "react-native-dialog";
export default function App({ navigation }) {
const [tempValue, setTempValue] = useState("");
const [inputValue, setInputValue] = useState("");
const handleChange = (e) => {
setInputValue(e);
};
const Submit = () => {
AsyncStorage.setItem("isLoggedIn?", "true");
AsyncStorage.setItem("name", inputValue);
navigation.navigate("Home");
};
useEffect(() => {
AsyncStorage.getItem("isLoggedIn?")
.then((value) => console.log(value))
.catch((e) => console.log(e));
}, []);
return (
<View style={styles.container}>
<Dialog.Container visible={true}>
<Dialog.Input
placeholder="Enter Your Name : "
value={inputValue}
onChangeText={(e) => handleChange(e)}
/>
<Dialog.Button label="Submit" onPress={Submit} />
<StatusBar style="auto" hidden />
</Dialog.Container>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
display: "flex",
flexDirection: "row",
},
});

下面是我的Message.js:

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function Message({ message }) {
return (
<View style={styles.message}>
<Text style={{ fontSize: 15, color: "white" }}>{message}</Text>
<StatusBar hidden />
</View>
);
}
const styles = StyleSheet.create({
message: {
backgroundColor: "#3894A3",
padding: 11,
borderRadius: 15,
marginBottom: 10,
textAlign: "center",
alignItems: "center",
margin: 15,
alignSelf: "flex-end",
color: "white",
},
});

首先，我试着在if else中这样做，如果登录为真，然后转到主屏幕，否则转到登录屏幕，然后转到初始路由，但两者都有相同的错误，我在这里做错了什么提前感谢!!

Answer 1

你正在尝试导航到" Login "one_answers" Home "，但你给屏幕命名为" LoginScreen "one_answers" homesscreen "，所以使用它们代替

navigation.navigate('LoginScreen')
navigation.navigate('HomeScreen')