React Native手势回调中顶级变量值异常的问题咨询

原因分析 #

这个现象的核心是react-native-gesture-handler对回调函数的差异化处理：

1. 内联回调被自动转为Worklet #

react-native-gesture-handler的Gesture API默认会通过babel插件，把链式调用里的内联函数编译为Worklet。Worklet是Reanimated的特性，用于在UI线程执行代码避免JS线程阻塞，但它运行在独立的JS上下文，和主线程JS环境完全隔离。

当你内联写onUpdate和onEnd时，这两个函数会被分别编译成Worklet，在UI线程的JS环境中执行。此时它们访问的someVar是UI线程环境里的副本，而非主线程的顶级变量——即便onUpdate修改了这个副本，主线程的someVar不会同步，而onEnd读取的也是UI线程中未正确更新的副本（或因Worklet闭包捕获机制，onEnd拿到的是初始状态的someVar快照）。

2. 独立变量回调作为普通JS函数执行 #

把回调提取为组件内的独立变量后，react-native-gesture-handler不会将它们转为Worklet，而是当作普通JS回调在主线程JS环境执行。此时所有回调访问的都是同一个文件级顶级变量someVar，修改和读取的是同一块内存的值，因此结果正常。

验证方式 #

可以在回调中添加Worklet检测：

// 内联回调中添加
console.log('Is Worklet:', typeof __workletContext !== 'undefined');

内联回调会输出true，独立变量回调输出false。

解决方法 #

如果要使用内联回调且保证变量访问正确，可显式指定在主线程执行：

import { runOnJS } from 'react-native-reanimated';

// ...

const gesture = Gesture.Pan()
    .onUpdate(() => {
        'worklet'; // 声明为Worklet
        runOnJS(() => {
            someVar = true;
            console.log('someVar is set to true');
        })();
    })
    .onEnd(() => {
        'worklet';
        runOnJS(() => {
            console.log(`someVar: ${someVar}`);
        })();
    });

或者直接采用独立变量回调的写法，规避Worklet的隔离问题。

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