React Native Stack.Navigator在Android端无法显示问题求助

核心问题分析 #

从你的代码来看，导致Android端Stack.Navigator显示空白的主要原因有以下几点：

1. 未使用NavigationContainer包裹导航器
   React Navigation要求所有导航组件必须被NavigationContainer包裹，这是导航系统的核心容器，缺失它会导致导航器无法正常初始化。

2. App.tsx中未渲染Unauthorized导航组件
   当前你的App.tsx仅渲染了SplashScreen，没有加载包含Stack.Navigator的Unauthorized组件，导航器根本没有被挂载到界面上。

3. AuthScreen的SafeAreaView未设置布局样式
   AuthScreen中的SafeAreaView没有设置flex:1，导致内部文本无法填充屏幕，即使导航器正常工作也可能看不到内容。

分步修复 #

1. 给导航器添加NavigationContainer包裹

修改Unauthorized.tsx，引入并使用NavigationContainer：

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import {ROUTES} from '../../constants/routes';
import {AuthScreen, LoginScreen, RegisterScreen} from './screens';

export const Unauthorized = () => {
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={ROUTES.ROUTE_AUTH}
        screenOptions={{headerShown: false}}>
        <Stack.Screen name={ROUTES.ROUTE_AUTH} component={AuthScreen} />
        <Stack.Screen name={ROUTES.ROUTE_LOGIN} component={LoginScreen} />
        <Stack.Screen name={ROUTES.ROUTE_REGISTER} component={RegisterScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

2. 修改App.tsx渲染Unauthorized组件

如果你的SplashScreen是启动页，需要在启动完成后切换到Unauthorized。暂时先替换SplashScreen来测试导航器是否正常：

import 'react-native-gesture-handler';
import React from 'react';
import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ApolloProvider} from '@apollo/client';
import client from './src/apollo';
import {Unauthorized} from './src/路径替换为Unauthorized所在目录';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex: 1,
  };

  return (
    <ApolloProvider client={client}>
      <SafeAreaView style={backgroundStyle}>
        <Unauthorized />
        <StatusBar backgroundColor="white" barStyle="dark-content" />
      </SafeAreaView>
    </ApolloProvider>
  );
};

export default App;

3. 修复AuthScreen的布局样式

修改AuthScreen.tsx，给SafeAreaView添加flex样式：

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

export const AuthScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Auth screen</Text>
    </SafeAreaView>
  );
};

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

额外检查项 #

• 确认ROUTES.ROUTE_AUTH是有效的字符串（比如"Auth"），确保与Stack.Screen的name属性完全匹配。
• 运行./gradlew clean清理Android项目缓存，确保依赖链接生效。
• 检查MainActivity.java是否正确配置react-native-screens：

// MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

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