React Native多页面导航时屏幕空白问题求助

问题描述 #

我正在使用React Native开发一款社交应用，需要在7个页面间实现导航，但加载代码后屏幕显示空白。不确定问题出在App.js文件还是登录页面文件中，期望解决页面无报错且能正常导航的问题。

原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',
    },
});

问题分析与修复步骤 #

App.js中的问题及修复 #

• 导航器创建错误：导入的是createStackNavigator，但代码里误用了createNativeStackNavigator()，需改为createStackNavigator()
• 缺少StyleSheet导入：代码末尾使用StyleSheet.create但未导入，需添加import { StyleSheet } from 'react-native';
• 未注册全部页面：仅注册了login和home页面，其余需要导航的页面（explore、createpost等）未在Stack.Navigator中添加，导致跳转失败

登录页面中的问题及修复 #

• 未接收navigation参数：组件需要接收navigation参数才能调用导航方法，需改为export default function login({ navigation }) { ... }
• 按钮参数错误：第二个按钮的language参数误写为"french"，应改为"english"
• 多余导入NavigationContainer：子页面不需要导入NavigationContainer，仅根组件需要，需移除该导入

修复后的代码 #

修复后的App.js #

import { StyleSheet } from 'react-native';
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 = createStackNavigator();

export default function App() {
    return (
       <NavigationContainer>
         <Stack.Navigator initialRouteName="login">
           <Stack.Screen 
              name="login"
              component={login}
              options={{title: "Welcome"}}
           />
           <Stack.Screen name="home" component={home} />
           <Stack.Screen name="explore" component={explore} />
           <Stack.Screen name="createpost" component={createpost} />
           <Stack.Screen name="messages" component={messages} />
           <Stack.Screen name="profile" component={profile} />
           <Stack.Screen name="settings" component={settings} />
         </Stack.Navigator>
       </NavigationContainer>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

修复后的登录页面 #

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, Button } from 'react-native';

export default function login({ navigation }) {
    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: "english"})}
            />
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

内容的提问来源于stack exchange，提问作者Timothy Runts