React Native Expo添加Drawer Navigation后仅显示启动页求助

云原生阿岚

2026-8-10

解决React Native抽屉导航导入后应用卡在启动页的问题

常见排查与修复步骤

补全依赖安装：
仅导入@react-navigation/drawer但未安装配套依赖会导致静默加载失败，执行以下命令补全：

npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

用Yarn则改为：

yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated

配置Reanimated（关键操作）：
Reanimated需额外配置才能正常运行：

在babel.config.js中添加插件：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

清理缓存并重启Metro服务：
```
npx react-native start --reset-cache
```
重新编译Android项目：
```
npx react-native run-android
```

检查导航结构规范：
确保createDrawerNavigator的使用符合React Navigation要求，示例正确结构如下：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

若缺少NavigationContainer包裹，会导致导航无法初始化，直接卡在启动页。

验证原生依赖链接：
React Native 0.60+虽支持自动链接，但可手动确认：
- 检查android/app/build.gradle是否包含Reanimated和Gesture Handler的依赖引用
- 检查android/settings.gradle是否有对应项目的引入配置