试图从不同的线程同步调用匿名函数。带抽屉导航器答案

【问题标题】：Tried to synchronously call anonymous function from a different thread. with DrawerNavigator试图从不同的线程同步调用匿名函数。带抽屉导航器
【发布时间】：2022-10-24 17:51:16
【问题描述】：

我刚刚升级到 react native 0.67.3，现在当我打开使用 react navigation v6 的应用程序时，我收到此错误：


Occurred in worklet location: /Users/path/thing/node_modules/react-native-reanimated/lib/reanimated2/hook/useAnimatedStyle.js (332:24)

Possible solutions are:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
2022-03-09 10:54:14.180294-0500 thing[1949:15686] [native] Tried to synchronously call anonymous function from a different thread.

Occurred in worklet location: /Users/path/thing/node_modules/react-native-reanimated/lib/reanimated2/hook/useAnimatedStyle.js (332:24)

我目前正在像这样使用 DrawerNavigator：

         <Drawer.Navigator initialRouteName="Home" >
            <Drawer.Screen name="HomeStack" component={HomeStack} />
          </Drawer.Navigator>

这是我的相关软件包版本：

    "react-native-reanimated": "2.3.1",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.3.11",
    "react-native-gesture-handler": "^1.9.0"

DrawerNavigator 中的任何想法可能导致此问题以及如何解决？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

React Navigation Drawer Navigator V6 使用react-native-reanimatedV2，它采用特殊的工作集函数来同步运行 JavaScript 和 UI 线程的代码。

尝试通过将useLegacyImplementation 设置为true 回退到旧的react-native-reanimated V1


 <Drawer.Navigator useLegacyImplementation={true} initialRouteName="Home" >
     <Drawer.Screen name="HomeStack" component={HomeStack} />
 </Drawer.Navigator>

【讨论】：

立即生效，非常感谢！
没有冒犯，但这甚至是一个解决方案，这只是一个丑陋的解决方法
我同意你的看法。这是一个临时解决方案，我认为它会随着新的 React Navigation Drawer 版本而过时
它有效，但这是一个临时修复

【解决方案2】：

实际上将在 UI 线程上执行的 javascript 函数。因此，如果您的函数只能在 javascript 线程上执行并且需要从工作集启动，则必须始终使用 runOnJS 指定。解决方案：

runOnJS( //// write your js function or code snippet , e,g jsRenderFun )();

尝试使用此流程希望它会有所帮助

import Animated, { runOnJS, } from 'react-native-reanimated';
const progress = useSharedValue(0);
const AnimatedProgress = () => {
progress.value = withTiming(1, {duration: 1000 * 5}, () => {
  progress.value = 0;
  runOnJS(jsRenderFun)();
    });
  };
  const jsRenderFun = () => {
       console.log('JS render');
  };

jsRenderFun 这个函数会在动画完成后渲染。

【讨论】：