React Native构建应用后出现空白屏且无控制台报错问题

核心问题 #

你的Navigation函数组件没有返回JSX元素——组件内直接编写了<SafeAreaView>结构，但没有用return关键字包裹，导致组件渲染时无任何输出，最终出现空白屏。

修正后的Navigation.js代码 #

import * as React from "react";
import IndexScreen from "./Screens/Index";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaView } from "react-native-safe-area-context";
const Stack = createNativeStackNavigator();

const Navigation = () => {
    return (
        <SafeAreaView style={{flex:1}}>
            <NavigationContainer>
                <Stack.Navigator initialRouteName="Index">
                    <Stack.Screen name="Index" component={IndexScreen} />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    )
}
export default Navigation;

也可以使用箭头函数的隐式返回写法（省略大括号，用括号包裹JSX）：

const Navigation = () => (
    <SafeAreaView style={{flex:1}}>
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Index">
                <Stack.Screen name="Index" component={IndexScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    </SafeAreaView>
)

额外排查点（若修正后仍有问题） #

• 确认IndexScreen组件是否正确返回可渲染内容，比如是否包含<View><Text>测试文本</Text></View>这类基础元素
• 检查react-native-safe-area-context依赖是否安装完整，iOS端可执行npx pod-install确保依赖链接
• 验证@react-navigation/native与@react-navigation/native-stack的版本是否兼容

内容的提问来源于stack exchange，提问作者Eman ElFahham