使用Expo与React Navigation时屏幕无内容显示问题求助

控制台能正常打印Home组件的console.log输出，但界面完全没有内容呈现，以下是相关代码：

导航组件代码 #

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import { View, Text } from 'react-native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function Home() {
    console.log('Home');
    return (
        <View>
            <Text>Home</Text>
        </View>
    );
}

function MyStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
    );
}
export default function Navigation() {
    return (
        <NavigationContainer>
            <MyStack />
        </NavigationContainer>
    );
}

App.js代码 #

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Navigation from './src/navigation/Navigation';

export default function App() {
  return (
    <View style={styles.container}>
      <Navigation />
    </View>
  );
}

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

package.json内容 #

{
  "name": "new-dictionary",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

问题原因与修复方案 #

问题出在App.js外层View的样式设置上：alignItems: 'center'和justifyContent: 'center'会强制将内部的NavigationContainer居中收缩，而NavigationContainer需要占满全屏才能正常渲染页面内容。

修复方式一：移除外层View的居中样式

修改App.js的样式，保留flex:1确保容器占满屏幕，移除居中属性：

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import Navigation from './src/navigation/Navigation';

export default function App() {
  return (
    <View style={styles.container}>
      <Navigation />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    // 移除alignItems和justifyContent
  },
});

修复方式二：直接将Navigation作为根元素

去掉外层的View，让NavigationContainer直接作为App组件的根节点：

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import Navigation from './src/navigation/Navigation';

export default function App() {
  return (
    <>
      <Navigation />
      <StatusBar style="auto" />
    </>
  );
}

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