React Native中createDrawerNavigator失效及抽屉布局实现咨询

先梳理下你代码里的核心问题，这正是导致抽屉导航无法正常工作的原因：

你的代码中的关键错误 #

1. 导航器嵌套错误：你把抽屉导航器MyApp嵌套在了一个普通View里，还额外加了<Text>Hey</Text>。导航器作为应用的根路由容器，不能这么嵌套，否则导航系统无法正确初始化和渲染。
2. 版本依赖不匹配：如果你的react-navigation是v4版本，createDrawerNavigator并不在核心包中，需要单独安装专属的子包并正确导入。

修复现有代码（适配react-navigation v4） #

第一步：安装正确依赖 #

先确保你安装了所有必需的包：

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

或使用yarn：

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

第二步：修改App.js代码 #

调整导航器的导入方式，并且让App组件直接返回导航容器：

import React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer'; // 修正导入路径
import { createAppContainer } from 'react-navigation'; // v4必须用createAppContainer包裹导航器
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

// 创建抽屉导航器
const DrawerNavigator = createDrawerNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen }
});

// 用容器包裹导航器
const AppContainer = createAppContainer(DrawerNavigator);

// App组件直接返回导航容器
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

第三步：保留现有子组件代码 #

你的HomeScreen.js和SettingsScreen.js代码没有问题，保持原样即可。

推荐使用最新版react-navigation v5+ #

v5+的API更灵活易用，写法也更直观，步骤如下：

第一步：安装依赖 #

npm install @react-navigation/native @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

iOS用户需额外执行：npx pod-install

第二步：编写App.js代码 #

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

const Drawer = createDrawerNavigator();

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

第三步：Android端额外配置（可选） #

在android/app/build.gradle中修改：

project.ext.react = [
  enableHermes: true,  // 开启Hermes以优化性能
]

在MainApplication.java中添加Reanimated初始化：

import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;

@Override
protected JSIModulePackage getJSIModulePackage() {
  return new ReanimatedJSIModulePackage();
}

测试抽屉导航 #

运行应用后，你可以：

• iOS端：从屏幕左侧边缘向右滑动打开抽屉
• Android端：用手势滑动，或后续给页面添加导航栏菜单按钮触发抽屉

这样就能正常实现抽屉布局啦！

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