博览会:未处理的承诺拒绝:TypeError:未定义不是一个对象(评估'props.navigation')]
我一直在研究 React Native,但遇到了这个错误,任何帮助都将不胜感激!
我的 App.js 屏幕
import React,{useEffect,useState} from "react";
import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";
export default function App() {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}
我的 HomeScreen.js 屏幕
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, ActivityIndicator, Image,View,Text } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
import AsyncStorage from '@react-native-async-storage/async-storage';
// <View style={styles.container}>
const HomeScreen=(props)=> {
const logout =(props)=>{
AsyncStorage.removeItem("token").then(()=>{
props.navigation.replace("login")
})
}
return (
<View style={styles.container}>
<Text> Your Email is XYZ </Text>
<Button
style={styles.btnStyle}
mode="contained"
onPress={() => logout()}
>
LOG OUT
</Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
fontSize:18,
justifyContent: 'center',
},
btnStyle: {
marginLeft: 18,
marginRight: 18,
marginTop: 30,
backgroundColor: "black",
textShadowColor: "white",
borderRadius: 35,
},
});
export default HomeScreen;
我的 AppNavigator.js
import React, { useEffect, useState } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import SignUp from "../screens/SignupScreen";
import LoginScreen from "../screens/LoginScreen";
import LoadingScreen from "../screens/LoadingScreen";
import HomeScreen from "../screens/HomeScreen";
import AsyncStorage from '@react-native-async-storage/async-storage';
const Stack = createStackNavigator();
function AppNavigator() {
const [isLoggedin, setLogged] = useState(null)
useEffect(() => {
const token = AsyncStorage.getItem('token')
if (token) {
setLogged(true)
}
else {
setLogged(false)
}
}, [])
return (
<Stack.Navigator
headerMode="none"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: '#fff' }
}}
>
<Stack.Screen name="loading" component={LoadingScreen}></Stack.Screen>
<Stack.Screen name="home" component={HomeScreen}></Stack.Screen>
<Stack.Screen name="login" component={LoginScreen}></Stack.Screen>
<Stack.Screen name="signup" component={SignUp}></Stack.Screen>
</Stack.Navigator>
);
}
export default AppNavigator;
我遇到的错误是
[未处理的承诺拒绝:TypeError:未定义不是对象(评估“props.navigation”)] 在 screens\HomeScreen.js:9:8 中注销 在 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 中 tryCallOne 在node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 在 setImmediate$argument_0 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 在 _callTimer 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 在 _callImmeditesPass 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 在 callImmedites 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 在 __callImmedites 在node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 位于 __guard$argument_0 位于 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 位于 __guard 位于 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 位于 flushedQueue 位于 [native code]:null 位于 flushedQueue 位于 [native code]:null 位于invokeCallbackAndReturnFlushedQueue
在您的
HomeScreen.js
中将您的 Logout 函数更改为此 -
const logout = () => { // You were passing a props variable here that was undefined..
AsyncStorage.removeItem('token').then(() => {
props.navigation.replace('login');
});
};
查看我创建的 这个 Snack... 只是为了向您展示实现
我还建议您不要在
AppNavigator.js
中恢复令牌。相反,您应该安装
expo-app-loading
并在
App.js
中恢复您的令牌
此外,在
useEffect
中执行
async
操作不是一个好习惯。查看上面的
Snack
链接,了解您应该如何实现它。我已经创建了它的一个克隆版本。看看吧
您的 Stack.screens 未使用 NavigationContainer 包装,并且导航道具未传递到您的屏幕/组件。
请检查 https://reactnavigation.org/docs/hello-react-navigation
return (
<NavigationContainer>
<Stack.Navigator
headerMode="none"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: '#fff' }
}}>
<Stack.Screen name="signup" component={SignUp}></Stack.Screen>
.....
</Stack.Navigator>
<NavigationContainer>
);