React Native Navigation栈屏幕无法正常显示问题排查

• 全链路视图缺失flex:1样式，视图高度坍缩为0，导航容器无可用可视渲染区域
• NavigationContainer层级放置错误，被嵌在普通业务组件内部，未作为路由体系的顶层容器
• 静态业务UI与导航容器层级混乱，职责未做拆分

修正实现方案 #

1. 调整根组件App.js #

给根视图加上flex:1占满屏幕，直接引入独立的导航容器组件，不要嵌套无撑满规则的普通视图：

import React from 'react';
import { View, StatusBar } from 'react-native';
import AppNavigator from './navigation/AppNavigator';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ffffff" translucent={true}/>
      <AppNavigator />
    </View>
  );
}

2. 抽离独立导航配置 #

新建navigation/AppNavigator.js，把栈导航的所有配置从原来的登录页业务组件中剥离，将NavigationContainer作为导航树的根节点，不要嵌在其他普通业务组件内部：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from '../screens/LoginScreen';
import RegisterScreen from '../screens/RegisterScreen';

const Stack = createStackNavigator();

export default function AppNavigator() {
  return (
    <NavigationContainer style={{ flex: 1 }}>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen 
          name="Login" 
          component={LoginScreen} 
          options={{ headerShown: false }}
        />
        <Stack.Screen 
          name="Register" 
          component={RegisterScreen} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 调整业务页面组件 #

新建screens/LoginScreen.js，把原来混在导航组件里的logo、slogan静态内容移到页面内部，所有页面根视图显式加flex:1撑满导航分配的可视区域：

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

export default function LoginScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.logo}>My Title</Text>
      <Text style={styles.slogan}>Welcome</Text>
      {/* 后续可在此处添加跳转注册页的按钮 */}
      <TouchableOpacity style={styles.jumpBtn}>
        <Text>前往注册</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100,
    alignItems: 'center',
    justifyContent: 'center'
  },
  logo: {
    fontSize: 24,
    marginBottom: 12
  },
  slogan: {
    fontSize: 16,
    color: '#666'
  },
  jumpBtn: {
    marginTop: 32,
    padding: 12,
    borderWidth: 1,
    borderColor: '#2196F3',
    borderRadius: 4
  }
});

高频踩坑说明 #

• React Native的Flexbox布局规则下，未显式设置flex:1的视图会按内容高度自动收缩，极易出现高度为0的白屏问题，导航容器及所有嵌套页面必须显式声明flex占满规则
• NavigationContainer是整个应用路由体系的根节点，不能嵌在普通业务组件的内部流中，否则会因父视图高度不足导致渲染空白
• 静态业务UI不能和导航容器同层级放在无flex规则的容器中，否则会挤压导航的可用渲染空间

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