React Native中react-native-gesture-handler无worklets回调警告解决求助

原因分析 #

这个警告是因为React Navigation的Drawer导航底层依赖react-native-gesture-handler实现侧滑手势，而Reanimated v3+要求所有手势回调要么标记为worklet（运行在UI线程），要么显式通过.runOnJS(true)指定回调运行在JS线程。你没主动用手势但出现警告，是因为Drawer的默认手势触发了这个检查。

解决方案 #

1. 确保依赖版本兼容 #

先确认你的依赖版本匹配，建议使用最新稳定版：

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

2. 在Drawer导航配置中添加runOnJS(true) #

你不需要修改底层代码，只需在创建Drawer.Navigator时，通过screenOptions配置drawerGestureHandlerProps，给默认手势加上.runOnJS(true)：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { Gesture } from 'react-native-gesture-handler';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerGestureHandlerProps: {
          gesture: Gesture.Pan().runOnJS(true),
        },
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

如果只想给单个屏幕配置，可在对应Drawer.Screen的options中设置：

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={{
    drawerGestureHandlerProps: {
      gesture: Gesture.Pan().runOnJS(true),
    },
  }}
/>

3. 检查并修复自定义手势（如果有） #

如果你无意中在项目其他地方使用了react-native-gesture-handler的手势（比如自定义侧边栏交互），需要给对应的手势回调做处理：

• 方法一：给回调添加'worklet'标记（让回调运行在UI线程）：

  const panGesture = Gesture.Pan().onUpdate((event) => {
    'worklet'; // 必须添加这行
    // 你的手势逻辑
  });
  

• 方法二：给手势添加.runOnJS(true)（让回调运行在JS线程）：

  const panGesture = Gesture.Pan().runOnJS(true).onUpdate((event) => {
    // 你的手势逻辑
  });
  

4. 确保依赖配置正确 #

• 在项目入口文件（index.js或App.js）顶部导入react-native-gesture-handler：

  import 'react-native-gesture-handler';
  

• 检查babel.config.js是否包含Reanimated插件（Reanimated v2+需要）：

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

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

最后执行以下命令清理缓存，重启Metro服务器：

npx react-native start --reset-cache

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