React Native中createDrawerNavigator导致页面空白问题求助

一、报错原因及修复步骤 #

你遇到的Module parse failed: Unexpected token错误，是因为@react-navigation/drawer依赖的react-native-reanimated使用了当前Babel配置不支持的语法export * as default，导致模块解析失败。按以下步骤修复：

1. 确保依赖完整安装
   执行命令安装抽屉导航及相关依赖：

   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
   

   iOS项目额外执行：

   npx pod-install
   

2. 配置Babel插件
   在项目根目录的babel.config.js中，添加react-native-reanimated/plugin到插件列表（必须放在最后）：

   module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: [
       // 其他已有的插件
       'react-native-reanimated/plugin',
     ],
   };
   

3. 清除缓存并重启项目
   执行命令清除缓存：

   npx react-native start --reset-cache
   

   之后重新启动iOS/Android项目即可。

二、抽屉导航正确使用示例 #

你的代码仅初始化了Drawer但未实际使用，以下是嵌套抽屉导航的完整实现（将Tab导航作为抽屉的主页面，新增设置页面作为抽屉选项）：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

// 原有页面组件保持不变
const Home = () => {
  return(
  <Stack.Navigator>
   <Stack.Screen  name="Dash" component={Dashboard} />
   <Stack.Screen name="Login" component={LoginPage} />
  </Stack.Navigator>
  );
};

const Search = () => (
  <View style={styles.color2}>
    <Text style={styles.title}>Search</Text>
  </View>
);

const Dashboard = () => {
  const nav = useNavigation();
  return (
    <View style={styles.color3}>
      <Text style={styles.title}>Dashboard</Text>
      <Button title='打开抽屉' onPress={() => nav.toggleDrawer()}></Button>
      <Button title='Login' onPress={() => nav.navigate('Login') } style={{marginTop: 10}}></Button>
    </View>
  );
};

const LoginPage = () => (
  <View style={styles.color2}>
    <Text style={styles.title}>Login</Text>
  </View>
);

// 新增抽屉专属页面
const Settings = () => (
  <View style={styles.color1}>
    <Text style={styles.title}>设置页面</Text>
  </View>
);

// 定义Tab导航
const TabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen options={{headerShown: false}} name="Home" component={Home} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
);

// 定义抽屉导航，嵌套Tab导航和设置页面
const DrawerNavigator = () => (
  <Drawer.Navigator initialRouteName="Main">
    <Drawer.Screen name="Main" component={TabNavigator} options={{title: '主页面'}} />
    <Drawer.Screen name="Settings" component={Settings} options={{title: '设置'}} />
  </Drawer.Navigator>
);

// 顶层用NavigationContainer包裹抽屉导航
const App = () => (
  <NavigationContainer>
    <DrawerNavigator />
  </NavigationContainer>
);

export default App;

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    marginBottom: 16,
    color: '#fff'
  },
  color1: {
    backgroundColor: 'red',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  color2: {
    backgroundColor: 'blue',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  color3: {
    backgroundColor: 'green',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

关键说明 #

• 抽屉导航作为顶层容器时，用Drawer.Navigator包裹所有抽屉选项（可以是Stack、Tab导航或单个页面）
• 通过useNavigation()提供的toggleDrawer()方法，可控制抽屉的打开/关闭
• 每个Drawer.Screen可通过options配置标题、图标等自定义样式

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