React Native Navigator/Stack Screen无报错但页面空白不渲染

无报错白屏不是导航路由识别问题，是几个典型写法错误导致的，这类问题不会触发运行时报错，所以ErrorBoundary无法捕获：

• KeyboardAvoidingView 缺少flex: 1样式。React Native布局规则和web端不同，未设置flex尺寸的容器默认不会撑满父级可用空间，最终会被计算为0高度，内部所有子元素哪怕正常挂载，视觉上也是完全空白。
• createNativeStackNavigator() 实例写在了App组件的渲染函数内部。每次组件重渲染都会生成全新的导航器实例，导航内部的状态、视图挂载逻辑会被反复重置，直接导致渲染异常。
• 多余的嵌套View干扰布局。Stack.Navigator本身默认带flex:1撑满规则，额外插入的无业务意义的包裹View很容易打断布局链，正常使用时不需要在导航容器和导航器之间额外插普通View节点。

import { View, Text, KeyboardAvoidingView, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 导航器实例必须移到组件外部全局作用域创建，禁止放在渲染函数内
const Stack = createNativeStackNavigator();

const TestPage = () => {
  return(
    <View style={{flex: 1, backgroundColor: 'red'}}>
      <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
      <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
      <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
      <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
      <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
    </View>
  )
}

export default function App() {
  return(
    <ErrorBoundary>
      <NavigationContainer>
        {/* 必须给KeyboardAvoidingView设置flex:1，同时补全对应平台的behavior属性 */}
        <KeyboardAvoidingView 
          style={{flex: 1}} 
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        >
          <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name="/" component={TestPage} />
          </Stack.Navigator>
        </KeyboardAvoidingView>
      </NavigationContainer>
    </ErrorBoundary>
  )
}

额外说明：Stack.Screen直接用component属性传入页面组件比用render children写法性能更好，后者每次渲染都会创建新的函数引用，会导致页面不必要的重挂载。这类无报错白屏优先排查根节点到目标页面的布局链上所有容器是否正确设置了flex:1，90%以上的同类问题都是这个原因导致的。

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