尝试在屏幕之间导航时屏幕未加载

Question

我试图在react native中的7个屏幕之间导航，当我加载我的代码时，屏幕显示空白。我不知道是否有一个问题在我的app.js文件或它是否在登录屏幕文件。我试图创建一个具有react native的社交媒体应用程序，它应该反过来在所有这些屏幕之间导航而没有任何错误。

我的App.js文件是:

import home from "./screens/home";
import explore from "./screens/explore";
import createpost from "./screens/createpost";
import messages from "./screens/messages";
import profile from "./screens/profile";
import settings from "./screens/settings";
import login from "./screens/login";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen 
name="login"
component={login}
options={{title: "Welcome"}}
/>
<Stack.Screen
name="home"
component={home}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

我的登录屏幕文件是:

import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, Button } from 'react-native';
export default function login() {
return (
<View style={styles.container}>
<Button title="Navigate to second screen with french"
onPress={() => navigation.navigate("explore", { language: "french"})}
/>
<Button title="Navigate to second screen with english"
onPress={() => navigation.navigate("explore", { language: "french"})}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

您应该添加您想要的页面在堆栈中导航到，就像在login和home中一样。

<Stack.Navigator>
<Stack.Screen 
name="login"
component={login}
options={{title: "Welcome"}}
/>
<Stack.Screen
name="home"
component={home}
/>
<Stack.Screen
name="explore"
component={explore}
/>
...
</Stack.Navigator>

然后

navigation.navigate('explore', {...});

。