Reanimated的SharedValue变化时如何调用React Native非动画业务函数

可行性说明 #

该需求完全可以实现。

错误原因分析 #

• useEffect不触发的原因：SharedValue属于引用类型的JS对象，其.value属性变更不会改变对象本身的内存地址，而useEffect的依赖项默认做浅比较，因此感知不到内部值的变化，不会触发回调。
• useCode报错的原因：useCode是Reanimated v1版本的API，v2及更高版本已经完全废弃该API，且v2版本调用主线程JS函数的方式也进行了重构。

正确实现方案 #

Reanimated v2及以上版本使用useAnimatedReaction搭配runOnJS即可实现需求，具体代码如下：

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

// 封装主线程的导航更新逻辑
const updateHeaderOptions = (isSolid) => {
  navigation.setOptions({
    headerTransparent: !isSolid
  });
};

useAnimatedReaction(
  // 返回需要监听的响应式值
  () => solidHeader.value,
  // 监听值变化时触发的回调
  (newValue, oldValue) => {
    // 仅在值实际变化时执行更新，避免无效调用
    if (newValue !== oldValue) {
      // 用runOnJS包装主线程函数，实现跨线程调用
      runOnJS(updateHeaderOptions)(newValue);
    }
  },
  // 外部依赖项
  [navigation]
);

注意事项 #

• 所有非Reanimated体系的普通JS函数，都需要通过runOnJS包装后才能在Reanimated的工作线程中调用，否则会出现执行异常。
• 新增新旧值对比逻辑可以减少不必要的导航更新操作，提升页面性能。

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