如何解决“动画：不支持`useNativeDriver`，因为缺少原生动画module。” 在react导航？

IT技术 javascript reactjs react-native jestjs react-navigation
2021-05-23 03:18:20

我正在开发 expo SDK 版本：36 和所有平台 (ios/android/web)

当react-navigation按照文档中的描述第一次安装并运行 jest --watch 时，出现以下警告：

    console.warn node_modules/react-native/Libraries/YellowBox/YellowBox.js:71
      Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

它也发生在浏览器控制台中：

bundle.js:18272 Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 
    in Card (at CardContainer.tsx:132)
    in CardContainer (at CardStack.tsx:499)
    in CardStack (at StackView.tsx:384)
    in KeyboardManager (at StackView.tsx:382)
    in Context.Consumer (at StackView.tsx:380)
    in StackView (at StackView.tsx:41)
    in StackView (at createStackNavigator.tsx:33)
    in Anonymous (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:351)
    in NavigationContainer (at AppCore.js:15)
    in AppCore (at App.js:14)
    in App (at withExpoRoot.web.js:13)
    in ExpoRootComponent (at registerRootComponent.web.js:6)
    in RootComponent
warn @ bundle.js:18272
r @ backend.js:6
shouldUseNativeDriver @ bundle.js:76326
TimingAnimation @ bundle.js:76894
start @ bundle.js:75709
start @ bundle.js:75715
Card._this.animate @ bundle.js:85843
componentDidMount @ bundle.js:85980
commitLifeCycles @ bundle.js:52243
commitLayoutEffects @ bundle.js:55486
callCallback @ bundle.js:30478
invokeGuardedCallbackDev @ bundle.js:30527
invokeGuardedCallback @ bundle.js:30582
commitRootImpl @ bundle.js:55224
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
commitRoot @ bundle.js:55064
finishSyncRender @ bundle.js:54471
performSyncWorkOnRoot @ bundle.js:54449
(anonymous) @ bundle.js:42341
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
flushSyncCallbackQueueImpl @ bundle.js:42336
flushSyncCallbackQueue @ bundle.js:42324
scheduleUpdateOnFiber @ bundle.js:53851
enqueueSetState @ bundle.js:44136
../../../react/cjs/react.development.js.Component.setState @ bundle.js:88125
_callee2$ @ bundle.js:1353
tryCatch @ bundle.js:90193
invoke @ bundle.js:90419
prototype.<computed> @ bundle.js:90245
tryCatch @ bundle.js:90193
invoke @ bundle.js:90283
(anonymous) @ bundle.js:90293
Promise.then (async)
invoke @ bundle.js:90292
(anonymous) @ bundle.js:90293
Promise.then (async)
invoke @ bundle.js:90292
(anonymous) @ bundle.js:90318
callInvokeWithMethodAndArg @ bundle.js:90317
enqueue @ bundle.js:90340
prototype.<computed> @ bundle.js:90245
../../../regenerator-runtime/runtime.js.exports.async @ bundle.js:90364
_callee2 @ bundle.js:1324
SplashScreen @ bundle.js:1537
constructClassInstance @ bundle.js:44346
updateClassComponent @ bundle.js:48555
beginWork$1 @ bundle.js:50328
beginWork$$1 @ bundle.js:55898
performUnitOfWork @ bundle.js:54837
workLoopSync @ bundle.js:54813
performSyncWorkOnRoot @ bundle.js:54412
(anonymous) @ bundle.js:42341
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
flushSyncCallbackQueueImpl @ bundle.js:42336
flushSyncCallbackQueue @ bundle.js:42324
scheduleUpdateOnFiber @ bundle.js:53851
enqueueSetState @ bundle.js:44136
../../../react/cjs/react.development.js.Component.setState @ bundle.js:88125
onFinish @ bundle.js:1392
_callee$ @ bundle.js:18446
tryCatch @ bundle.js:90193
invoke @ bundle.js:90419
prototype.<computed> @ bundle.js:90245
tryCatch @ bundle.js:90193
invoke @ bundle.js:90283
(anonymous) @ bundle.js:90293
Promise.then (async)
invoke @ bundle.js:90292
(anonymous) @ bundle.js:90318
callInvokeWithMethodAndArg @ bundle.js:90317
enqueue @ bundle.js:90340
prototype.<computed> @ bundle.js:90245
../../../regenerator-runtime/runtime.js.exports.async @ bundle.js:90364
_callee @ bundle.js:18389
componentDidMount @ bundle.js:18470
commitLifeCycles @ bundle.js:52243
commitLayoutEffects @ bundle.js:55486
callCallback @ bundle.js:30478
invokeGuardedCallbackDev @ bundle.js:30527
invokeGuardedCallback @ bundle.js:30582
commitRootImpl @ bundle.js:55224
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
commitRoot @ bundle.js:55064
finishSyncRender @ bundle.js:54471
performSyncWorkOnRoot @ bundle.js:54449
scheduleUpdateOnFiber @ bundle.js:53840
updateContainer @ bundle.js:57245
(anonymous) @ bundle.js:57670
unbatchedUpdates @ bundle.js:54575
legacyRenderSubtreeIntoContainer @ bundle.js:57669
render @ bundle.js:57750
renderApplication @ bundle.js:65334
run @ bundle.js:65227
runApplication @ bundle.js:65266
registerRootComponent @ bundle.js:18777
../../../expo/AppEntry.js @ bundle.js:14474
__webpack_require__ @ bundle.js:727
fn @ index.js:69
0 @ bundle.js:101987
__webpack_require__ @ bundle.js:727
(anonymous) @ bundle.js:794
(anonymous) @ bundle.js:797
Show 40 more frames
[Violation] 'requestAnimationFrame'

相关问题：

最后一个提供了一个解决方案，但它说打开 Xcode，而我在 Linux Debian 10 上。我没有 Xcode。我可以使用 Macbook 并执行此步骤，但我想知道：

  • 在 Linux 上工作时我应该关心吗？
  • 在 Macbook 上工作时我应该关心吗（如果发生的话）？
  • 在测试时我应该关心我的应用程序的健康吗？在什么情况下？
3个回答

禁用此警告

添加

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

或者

jest.mock('NativeAnimatedHelp');

到您的测试文件

我会告诉你我是怎么做的

我写在 package.json

"jest": {
    "setupFiles": [
      "./mock.js"
    ],

在文件 mock.js 中

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
jest.mock('NativeAnimatedHelp');

您可以放心地忽略此警告。useNativeDriver 仅在设备上运行代码时才重要。

以上没有对我有用，但最终我在这里找到了解决方案：

  1. 创建jest-setup.js文件（在我的情况下在src/tests目录中）：

src/tests/jest-setup.js：

import 'react-native-gesture-handler/jestSetup';

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {};

  return Reanimated;
});
  1. 安装必要的包（react-native-reanimated仅在我的情况下，但也许您的代码会问您其他问题）：
npm install --save-dev react-native-reanimated
  1. 在 jest 配置中添加一行package.json：
  "jest": {
    "setupFiles": [
      "<rootDir>/src/tests/jest-setup.js"
    ]
  },

如果您的jest-setup.js文件位于其他目录中 - 相应地更改位置。

经过这些简单的步骤后，烦人的警告就消失了。感谢 Spencer Carli 和他通过上面链接的文章。

其它你可能感兴趣的问题
上一篇印刷品顶层的间隙 下一篇闭环步进机可以用于挤出机吗？