React Native中StackNavigator无内容显示问题求助

核心问题：你错误地将Stack.Navigator嵌套在了ScrollView和SafeAreaView内部，破坏了React Navigation导航器的布局逻辑，导致页面空白。

修复后的代码 #

import React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {AppProvider} from './src/stores/app-context';

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

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

原因说明 #

React Navigation的导航组件（包括Stack.Navigator）本身已经内置了布局适配机制，会自动处理安全区域和页面尺寸计算。强行将其包裹在ScrollView、SafeAreaView这类容器中，会干扰导航器的布局渲染流程，导致内容无法显示。

补充：页面内使用安全区域和滚动视图 #

如果你的某个页面需要用到SafeAreaView或ScrollView，应该在对应的屏幕组件内部添加，而非包裹整个导航器：

import {SafeAreaView, ScrollView} from 'react-native';

function HomeScreen() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>
        <Text>Home Screen</Text>
        {/* 页面其他滚动内容 */}
      </ScrollView>
    </SafeAreaView>
  );
}

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