React Native StackNavigator返回组件空白，控制台日志正常问题求助

看了你的问题描述和代码，核心问题其实出在导航器的依赖与导入配置上——毕竟你的LoginScreen本身能正常渲染（直接跳转时显示正常、日志也能输出），但通过AuthNavigator跳转就空白，说明StackNavigator的初始化有问题，大概率是react-navigation版本对应的包导入错误导致的。

问题根源 #

在react-navigation v4及以后的版本中，官方把不同类型的导航器拆分成了独立的npm包：

• createStackNavigator 来自 react-navigation-stack
• createDrawerNavigator 来自 react-navigation-drawer
• createSwitchNavigator 来自 react-navigation-switch
  你当前的代码直接从主包react-navigation导入这些导航器，会导致导航器无法正确初始化，嵌套的页面自然无法渲染。

解决方案步骤 #

1. 安装必要的子包依赖

先在项目根目录安装对应导航器的依赖：

# 使用 npm
npm install react-navigation-stack react-navigation-drawer react-navigation-switch

# 或者使用 yarn
yarn add react-navigation-stack react-navigation-drawer react-navigation-switch

2. 修改AuthNavigator的导入代码

把createStackNavigator的导入来源改为react-navigation-stack：

// AuthNavigator.js
import { createStackNavigator } from 'react-navigation-stack'; // 修改此处导入
import LoginScreen from '../../screens/auth/LoginScreen';
import SignUpScreen from '../../screens/auth/SignUpScreen';

export default createStackNavigator({
  Login : { screen : LoginScreen },
  SignUp: { screen : SignUpScreen }
}, { initialRouteName: 'Login', })

3. 同步修改MainNavigator的SwitchNavigator导入

如果你的react-navigation版本是v4+，createSwitchNavigator也需要从react-navigation-switch导入：

// MainNavigator.js
import { createAppContainer } from 'react-navigation';
import { createSwitchNavigator } from 'react-navigation-switch'; // 修改此处导入
import AuthNavigator from './auth/AuthNavigator'
import AppNavigator from './app/AppNavigator'
import AuthLoadingScreen from '../screens/auth/AuthLoadingScreen'

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppNavigator,
    Auth: AuthNavigator,
  },
  { initialRouteName: 'AuthLoading', }
));

4. 修正AppNavigator的DrawerNavigator导入

同理，AppNavigator中的createDrawerNavigator需要从react-navigation-drawer导入：

// AppNavigator.js
import { createDrawerNavigator } from 'react-navigation-drawer'; // 修改此处导入
// 导入你的页面组件
import ProfileScreen from '../../screens/app/ProfileScreen';
import HomeScreen from '../../screens/app/HomeScreen';

export default createDrawerNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen }
  // 其他页面配置
});

验证修改 #

完成上述调整后，重新运行项目：

react-native run-android # 或 run-ios

此时AuthNavigator应该能正常渲染LoginScreen，不会再出现空白页面了。

内容的提问来源于stack exchange，提问作者Leo Prud'hom