React Native Drawer报错：Cannot read Property 'isConfigured'及Reanimated创建worklet失败

问题描述 #

我尝试创建一个简单的React Native抽屉导航，但遇到两个错误：

1. Cannot read Property 'isConfigured' of undefined
2. [Reanimated] Failed to create a worklet

已尝试卸载重装所有依赖，但问题依旧，求解决方法。

我的代码 #

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React from 'react';
import { createDrawerNavigator} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import StockRoom from './StockRoom';
const Drawer = createDrawerNavigator();

function Refill(navigation: any): React.JSX.Element {
  interface CustomAlertProps {
    show: boolean;
    onClose: () => void;
  }

  return (
    <NavigationContainer independent={true}>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={StockRoom} />
      </Drawer.Navigator>
    </NavigationContainer>
    
  );
}


export default Refill;

错误说明 #

• 第一个错误：控制台提示Cannot read property 'isConfigured' of undefined，调用栈指向Reanimated相关依赖代码
• 第二个错误：控制台提示[Reanimated] Failed to create a worklet. Did you forget to add Reanimated's babel plugin?

解决方法 #

1. 配置Reanimated的Babel插件 #

@react-navigation/drawer依赖Reanimated，而Reanimated必须配置Babel插件才能正常生成worklet，这是触发两个错误的核心原因。

操作步骤：

• 打开项目根目录的babel.config.js
• 在plugins数组末尾添加Reanimated插件：

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

2. 移除重复的NavigationContainer #

你的代码在Refill组件内嵌套了NavigationContainer，但整个App只需要一个根级的NavigationContainer，重复嵌套会导致导航上下文冲突，触发isConfigured错误。

修改后的Refill组件代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React from 'react';
import { createDrawerNavigator} from '@react-navigation/drawer';
import StockRoom from './StockRoom';
const Drawer = createDrawerNavigator();

function Refill(): React.JSX.Element {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={StockRoom} />
    </Drawer.Navigator>
  );
}

export default Refill;

然后在App根组件中统一包裹NavigationContainer（示例：App.js）：

import { NavigationContainer } from '@react-navigation/native';
import Refill from './Refill';

export default function App() {
  return (
    <NavigationContainer>
      <Refill />
    </NavigationContainer>
  );
}

3. 清理缓存并重启服务 #

完成上述配置后，必须清理Metro缓存并重启开发服务器：

• 停止当前运行的Metro服务
• 执行缓存清理命令：

npx react-native start --reset-cache

• 重新启动App：npx react-native run-android 或 npx react-native run-ios

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