用户登录后重定向到主页时出现React Native错误

Question

我正在用react native编写一个应用程序。当用户打开应用程序时，如果没有会话令牌，Welcome.js屏幕将首先打开。然后他点击Login.js屏幕登录。如果登录成功，我将尝试重定向到主页。但我就是做不到。它给出了一个错误。我得到的错误是：

[

任何导航器都没有处理有效载荷为｛"name"："Home"｝的操作"NAVIGATE"。你有一个名为"主页"的屏幕吗

]

**App.js Code**
import React, {useState,useEffect} from 'react';
import { LogBox,Linking } from 'react-native';
import { createDrawerNavigator,DrawerContentScrollView,DrawerItemList,DrawerItem } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AsyncStorage from '@react-native-async-storage/async-storage';
import FirstPages from './src/screens/FirstPages';
import Home from './src/screens/Home';
import Notification from './src/screens/Notification';
import Message from './src/screens/Message';
import MessageDetail from './src/screens/MessageDetail';
import Profile from './src/screens/Profile';

LogBox.ignoreLogs(['NativeBase:']);

function App() {

const [user,setUser] = useState(false);
//AsyncStorage.removeItem("user");
useEffect(()=>{
AsyncStorage.getItem('user').then((value)=>(
setUser(value != null && JSON.parse(value).id ? value : false )
));
});


const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const MessageStack = createNativeStackNavigator();

function MessageMain (){
return(
<MessageStack.Navigator screenOptions={{headerShown: false}}>
<MessageStack.Screen name="Message" component={Message} />
<MessageStack.Screen name="MessageDetail" component={MessageDetail} />
</MessageStack.Navigator>
)
};

function BottomTab(){
return (
<Tab.Navigator screenOptions={{headerShown:false}}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Notification" component={Notification} />
<Tab.Screen name="Message" component={MessageMain} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
)
}

return (
<NavigationContainer> 
{
user ? 
<Drawer.Navigator initialRouteName="Home3" screenOptions={{headerShown: false}} >
<Drawer.Screen name="Home3" component={BottomTab} />
</Drawer.Navigator>
:
<FirstPages /> 
}
</NavigationContainer> 
);
}
export default App;


**Login.js**
import React, {useState,useEffect} from 'react';
import { LogBox,KeyboardAvoidingView  } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { FontAwesome } from '@expo/vector-icons';
import { Input,Image,View,Text,NativeBaseProvider,Button,ScrollView,Icon,Modal,FormControl } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import colors from "../config/colors"; 
LogBox.ignoreLogs(['NativeBase:']);

function Login( {navigation} ) {



const storeSetData = async (value) => {
try {
await AsyncStorage.setItem('user', value)
} catch (e) {
alert("Hata oluştu!");
return false;
}
}





//Login Post İşlemi
const LoginPost = (  )=>{


setRequestPost(true);

setButtonPost("İşleniyor...");

const formData = new FormData();
formData.append("user_login",1);
formData.append("u_name",userName);
formData.append("u_pass",userPass);


fetch(API_URL, {
method: 'post',
body: formData,
})
.then((response) => response.json())
.then((responseData) => {
if(responseData.success){

const dataStringify = JSON.stringify({
id:responseData.user.u_id,
full_name:responseData.user.u_full_name,
name:responseData.user.u_name,
image:responseData.user.u_image
});

storeSetData(dataStringify);

//storage kayıt işleminde hata varsa uyar
if(!storeSetData){
setAlertModal( { message:"Hata oluştu!",type:"error" });
setShowModal(true);
return false;
}
setAlertModal( { message:responseData.success,type:"success" });

//redirect
navigation.navigate("Home");



}else{
setAlertModal( { message:responseData.error,type:"error" });
}
setShowModal(true);
setButtonPost("Giriş Yap");
})
.catch((error) => {
setAlertModal( { message:"Bir hata oluştu!",type:"error" } );
setButtonPost("Giriş Yap");
})
.finally(()=>{ 
setButtonPost("Giriş Yap");
setRequestPost(false);
});

}


return (
<NativeBaseProvider>  
<LinearGradient
colors={['rgba(255, 221, 214, .95)', 'rgba(249, 241, 214, .9)']}
start={{ x: 0.65, y: 0.33 }}
end={{ x: 0.35, y: 0.33 }}
flex={1}
>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
>

<ScrollView>
<View flex="1" pt="5" pb="0" px={5}>
<Image
source={require("../img/login.png")}
alt="Alternate Text" 
flex="1"
/>
</View>

</ScrollView>


</KeyboardAvoidingView>
</LinearGradient>
</NativeBaseProvider>
);
}


export default Login;

**FirstPages.js**
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Welcome from './Welcome';
import Register from './Register';
import Login from './Login';

const Stack = createNativeStackNavigator();
const FirstPages = () => {
return(
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
)
};

export default FirstPages;

Answer 1

您不能像那样导航到当前导航器之外的屏幕。

建议您在此处使用react导航文档中的身份验证流：https://reactnavigation.org/docs/auth-flow

它使用条件操作来更改导航器，而不是直接导航到屏幕。

例如：

isSignedIn ? (
<>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</>
)

来源：https://reactnavigation.org/docs/auth-flow#how-它将工作