global.__reanimatedWorkletInit 不是函数。反应原生动画 v2

Posted 2023-02-19

【中文标题】global.__reanimatedWorkletInit 不是函数。反应原生动画 v2

【英文标题】：global.__reanimatedWorkletInit is not a function. react-native-animated v2

【发布时间】：2021-12-08 00:38:10

【问题描述】：

我使用'worklet'; 和runOnUI() 然后得到下面的错误。

因为我用'worklet';所以加了import 'react-native-reanimated'

因为我也用runOnUI所以加了import runOnUI from 'react-native-animated'

错误：

ERROR  TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

【问题讨论】：

可以确认这个问题。提到的解决方法 here 和 here 没有帮助。

【参考方案1】：

简答：

除了runOnUI，还可以从react-native-reanimated导入和使用其他东西，例如还添加useSharedValue：

import  useSharedValue, runOnUI  from 'react-native-reanimated';

并使用共享值：

const sharedVal = useSharedValue(0);

现在错误将消失。

---

长答案（我是如何找到解决方案的）：

起初我在尝试创建小部件时遇到错误 (global.__reanimatedWorkletInit is not a function.)：

import React from 'react';
import  Text  from 'react-native';

const Example = () => 
  const someWorklet = () => 
    'worklet';
    console.log("Hey I'm running on the UI thread");
  ;

  return (<Text>Example</Text>);
;

export default Example;

添加import 'react-native-reanimated'; 帮助我摆脱了错误。

然后我想运行someWorklet。所以我添加了一个runOnJS（runOnUI 得到了相同的结果）电话。我的组件现在返回了：

<View>
  <Text>Worklet: runOnUI(someWorklet)()</Text>
</View>

我通过import runOnUI from 'react-native-reanimated'; 导入了它。

现在同样的错误又回来了。

只有在我也导入并调用 useSharedValue 之后，一切都按预期工作。这是我不再抛出错误的组件代码：

import React from 'react';
import  View, Text  from 'react-native';
import  useSharedValue, runOnJS  from 'react-native-reanimated';

const Example = () => 
  const someWorklet = () => 
    'worklet';
    console.log("Hey I'm running on the UI thread");
    return 'World';
  ;

  const sharedVal = useSharedValue(0);

  return (
    <View>
      <Text>Hello, runOnJS(someWorklet)()</Text>
    </View>
  );
;

export default Example;