使用@react-navigation/native-stack时Stack Navigator Screen页面空白问题求助

问题原因 #

你的代码存在两个布局层面的错误，导致导航页面无法正常渲染：

1. 根组件的SafeAreaView没有添加flex: 1样式，React Native中父容器未设置flex属性时，不会自动撑满整个屏幕，内部的NavigationContainer没有可用高度，所以导航相关内容全部显示为空白，只有高度由内容撑开的HomeScCheck组件可见。
2. HomeSc组件的根View未设置flex: 1，就算容器有可用高度，内容也可能无法正常渲染。

修复方案 #

修改两处代码即可：

1. 给根SafeAreaView添加style={{flex:1}}
2. 给HomeSc的根View添加flex:1样式

修复后的完整App.js代码如下：

import * as React from 'react';
import { View, Text , SafeAreaView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


function HomeScCheck() {
  return (
    <View><Text style={{color:"red"}}>Home Screen Check</Text></View>
  );
}

function HomeSc() {
  return (
    <View style={{flex:1}}><Text>Home Screen</Text></View>
  );
}

function DetailSc() {
  return (
    <View style={{ flex: 1}}>
      <Text style={{color: '#333', fontSize:30}}>Detail Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <SafeAreaView style={{flex:1}}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeSc} />
          <Stack.Screen name="Detail" component={DetailSc}   options={{ title: 'Overview' }} />
        </Stack.Navigator>
      </NavigationContainer>
      <HomeScCheck/>  
    </SafeAreaView>
  );
}

export default App;

如果你不需要HomeScCheck和导航页面同时显示，直接把HomeScCheck放到导航对应的页面组件内即可。

内容的提问来源于stack exchange，提问作者Napoleon Wai Lun Wong