How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation?

huangapple
go评论102阅读模式
英文:

How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation?

问题

我正在使用 Expo SDK 版本：36，在所有平台上（iOS/android/web）进行工作。

当按照文档中的描述首次安装react-navigation并在执行此操作时运行jest --watch时，出现以下警告：

  1. console.warn node_modules/react-native/Libraries/YellowBox/YellowBox.js:71
  2. 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

在浏览器控制台中也会出现：

  1. 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 
  2.     in Card (at CardContainer.tsx:132)
  3.     in CardContainer (at CardStack.tsx:499)
  4.     in CardStack (at StackView.tsx:384)
  5.     in KeyboardManager (at StackView.tsx:382)
  6.     in Context.Consumer (at StackView.tsx:380)
  7.     in StackView (at StackView.tsx:41)
  8.     in StackView (at createStackNavigator.tsx:33)
  9.     in Anonymous (at createNavigator.js:80)
  10.     in Navigator (at createAppContainer.js:351)
  11.     in NavigationContainer (at AppCore.js:15)
  12.     in AppCore (at App.js:14)
  13.     in App (at withExpoRoot.web.js:13)
  14.     in ExpoRootComponent (at registerRootComponent.web.js:6)
  15.     in RootComponent
  16. warn @ bundle.js:18272
  17. ...

相关问题：

最后一个问题提供了解决方案，但它要求打开 Xcode，而我使用的是 Linux Debian 10，没有 Xcode。我可以使用 Macbook 并执行这一步骤，但我想知道：

  • 在 Linux 上工作时是否需要关心这个问题？
  • 如果在 Macbook 上遇到该问题，是否需要关心？
  • 在测试时是否需要关心我的应用程序的健康状况？在哪些情况下需要关心？
英文:

I am working on expo SDK Version: 36, and on all platforms (ios/android/web)

When installing react-navigation for the first time as described in the documentation and running jest --watch while doing it, and the following warning appeared:

  1.     console.warn node_modules/react-native/Libraries/YellowBox/YellowBox.js:71
  2.       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

It also happen in the browser console:

  1. 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 
  2.     in Card (at CardContainer.tsx:132)
  3.     in CardContainer (at CardStack.tsx:499)
  4.     in CardStack (at StackView.tsx:384)
  5.     in KeyboardManager (at StackView.tsx:382)
  6.     in Context.Consumer (at StackView.tsx:380)
  7.     in StackView (at StackView.tsx:41)
  8.     in StackView (at createStackNavigator.tsx:33)
  9.     in Anonymous (at createNavigator.js:80)
  10.     in Navigator (at createAppContainer.js:351)
  11.     in NavigationContainer (at AppCore.js:15)
  12.     in AppCore (at App.js:14)
  13.     in App (at withExpoRoot.web.js:13)
  14.     in ExpoRootComponent (at registerRootComponent.web.js:6)
  15.     in RootComponent
  16. warn @ bundle.js:18272
  17. r @ backend.js:6
  18. shouldUseNativeDriver @ bundle.js:76326
  19. TimingAnimation @ bundle.js:76894
  20. start @ bundle.js:75709
  21. start @ bundle.js:75715
  22. Card._this.animate @ bundle.js:85843
  23. componentDidMount @ bundle.js:85980
  24. commitLifeCycles @ bundle.js:52243
  25. commitLayoutEffects @ bundle.js:55486
  26. callCallback @ bundle.js:30478
  27. invokeGuardedCallbackDev @ bundle.js:30527
  28. invokeGuardedCallback @ bundle.js:30582
  29. commitRootImpl @ bundle.js:55224
  30. unstable_runWithPriority @ bundle.js:92068
  31. runWithPriority$2 @ bundle.js:42291
  32. commitRoot @ bundle.js:55064
  33. finishSyncRender @ bundle.js:54471
  34. performSyncWorkOnRoot @ bundle.js:54449
  35. (anonymous) @ bundle.js:42341
  36. unstable_runWithPriority @ bundle.js:92068
  37. runWithPriority$2 @ bundle.js:42291
  38. flushSyncCallbackQueueImpl @ bundle.js:42336
  39. flushSyncCallbackQueue @ bundle.js:42324
  40. scheduleUpdateOnFiber @ bundle.js:53851
  41. enqueueSetState @ bundle.js:44136
  42. ../../../react/cjs/react.development.js.Component.setState @ bundle.js:88125
  43. _callee2$ @ bundle.js:1353
  44. tryCatch @ bundle.js:90193
  45. invoke @ bundle.js:90419
  46. prototype.<computed> @ bundle.js:90245
  47. tryCatch @ bundle.js:90193
  48. invoke @ bundle.js:90283
  49. (anonymous) @ bundle.js:90293
  50. Promise.then (async)
  51. invoke @ bundle.js:90292
  52. (anonymous) @ bundle.js:90293
  53. Promise.then (async)
  54. invoke @ bundle.js:90292
  55. (anonymous) @ bundle.js:90318
  56. callInvokeWithMethodAndArg @ bundle.js:90317
  57. enqueue @ bundle.js:90340
  58. prototype.<computed> @ bundle.js:90245
  59. ../../../regenerator-runtime/runtime.js.exports.async @ bundle.js:90364
  60. _callee2 @ bundle.js:1324
  61. SplashScreen @ bundle.js:1537
  62. constructClassInstance @ bundle.js:44346
  63. updateClassComponent @ bundle.js:48555
  64. beginWork$1 @ bundle.js:50328
  65. beginWork$$1 @ bundle.js:55898
  66. performUnitOfWork @ bundle.js:54837
  67. workLoopSync @ bundle.js:54813
  68. performSyncWorkOnRoot @ bundle.js:54412
  69. (anonymous) @ bundle.js:42341
  70. unstable_runWithPriority @ bundle.js:92068
  71. runWithPriority$2 @ bundle.js:42291
  72. flushSyncCallbackQueueImpl @ bundle.js:42336
  73. flushSyncCallbackQueue @ bundle.js:42324
  74. scheduleUpdateOnFiber @ bundle.js:53851
  75. enqueueSetState @ bundle.js:44136
  76. ../../../react/cjs/react.development.js.Component.setState @ bundle.js:88125
  77. onFinish @ bundle.js:1392
  78. _callee$ @ bundle.js:18446
  79. tryCatch @ bundle.js:90193
  80. invoke @ bundle.js:90419
  81. prototype.<computed> @ bundle.js:90245
  82. tryCatch @ bundle.js:90193
  83. invoke @ bundle.js:90283
  84. (anonymous) @ bundle.js:90293
  85. Promise.then (async)
  86. invoke @ bundle.js:90292
  87. (anonymous) @ bundle.js:90318
  88. callInvokeWithMethodAndArg @ bundle.js:90317
  89. enqueue @ bundle.js:90340
  90. prototype.<computed> @ bundle.js:90245
  91. ../../../regenerator-runtime/runtime.js.exports.async @ bundle.js:90364
  92. _callee @ bundle.js:18389
  93. componentDidMount @ bundle.js:18470
  94. commitLifeCycles @ bundle.js:52243
  95. commitLayoutEffects @ bundle.js:55486
  96. callCallback @ bundle.js:30478
  97. invokeGuardedCallbackDev @ bundle.js:30527
  98. invokeGuardedCallback @ bundle.js:30582
  99. commitRootImpl @ bundle.js:55224
  100. unstable_runWithPriority @ bundle.js:92068
  101. runWithPriority$2 @ bundle.js:42291
  102. commitRoot @ bundle.js:55064
  103. finishSyncRender @ bundle.js:54471
  104. performSyncWorkOnRoot @ bundle.js:54449
  105. scheduleUpdateOnFiber @ bundle.js:53840
  106. updateContainer @ bundle.js:57245
  107. (anonymous) @ bundle.js:57670
  108. unbatchedUpdates @ bundle.js:54575
  109. legacyRenderSubtreeIntoContainer @ bundle.js:57669
  110. render @ bundle.js:57750
  111. renderApplication @ bundle.js:65334
  112. run @ bundle.js:65227
  113. runApplication @ bundle.js:65266
  114. registerRootComponent @ bundle.js:18777
  115. ../../../expo/AppEntry.js @ bundle.js:14474
  116. __webpack_require__ @ bundle.js:727
  117. fn @ index.js:69
  118. 0 @ bundle.js:101987
  119. __webpack_require__ @ bundle.js:727
  120. (anonymous) @ bundle.js:794
  121. (anonymous) @ bundle.js:797
  122. Show 40 more frames
  123. [Violation] 'requestAnimationFrame'

Related issues:

The last one offers a solution, but it says to open Xcode, while I am on Linux Debian 10. I do not have Xcode. I can use a Macbook and do the step but I am wondering:

  • Should I care when working on Linux?
  • Should I care when working on Macbook (if it happens)?
  • Should I care for the health of my app while testing? Under which circumstances?

答案1

得分: 92

要禁用此警告，请将以下内容之一添加到您的测试文件中。

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

或

  1. jest.mock('NativeAnimatedHelp');

在您的 package.json 文件中

  1. "jest": {
  2.     "setupFiles": [
  3.         "./mock.js"
  4.     ]
  5. }

在 mock.js 中

  1. jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
  2. jest.mock('NativeAnimatedHelp');
英文:

To disable this warning add either of the following to your test file.

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

or

  1. jest.mock('NativeAnimatedHelp');

In your package.json file

  1. "jest": {
  2.     "setupFiles": [
  3.       "./mock.js"
  4.     ],

In mock.js

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

答案2

得分: 5

你可以安全地忽略此警告。useNativeDriver 只在在设备上运行代码时才重要。

英文:

You can safely ignore this warning. useNativeDriver is only important when running the code on device.

答案3

得分: 4

  1. 什么都不适用于我，但最终我在这里找到了解决方案[1]：
  3. 1）创建`jest-setup.js`文件（在我的情况下位于`src/tests`目录）：
  5. **src/tests/jest-setup.js**:
  6. ```javascript
  7. import 'react-native-gesture-handler/jestSetup';
  9. jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
  11. jest.mock('react-native-reanimated', () => {
  12.   const Reanimated = require('react-native-reanimated/mock');
  14.   // `call`的模拟立即调用回调，这是不正确的
  15.   // 因此，我们用一个空操作覆盖它
  16.   Reanimated.default.call = () => {};
  18.   return Reanimated;
  19. });

2）安装必要的包（在我的情况下只有react-native-reanimated，但你的代码可能会要求其他东西）：

  1. npm install --save-dev react-native-reanimated

3）在package.json中的jest配置中添加一行：

  1.   "jest": {
  2.     "setupFiles": [
  3.       "<rootDir>/src/tests/jest-setup.js"
  4.     ]
  5.   },

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

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

  2. <details>
  3. <summary>英文:</summary>
  5. Nothing above wasn&#39;t working for me, but eventually I&#39;ve found solution [here][1]:
  7. 1) create `jest-setup.js` file (in my case in `src/tests` directory):
  9. **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;
});

  2. 2) Install necessary packages (in my case `react-native-reanimated` only, but maybe your code will ask you something else):

npm install --save-dev react-native-reanimated

  2. 3) Add one row to jest config in `package.json`:

"jest": {
"setupFiles": [
"<rootDir>/src/tests/jest-setup.js"
]
},

  2. If your `jest-setup.js` file located in other directory - change location accordingly.
  4. After these simple steps, the annoying warning has gone. Thanks Spencer Carli and his article by link above.
  6.   [1]: https://www.reactnativeschool.com/setup-jest-tests-with-react-navigation
  8. </details>

huangapple
  • 本文由 发表于 2020年1月4日 12:09:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/59587799.html
  • javascript
  • jestjs
  • react-native
  • react-navigation
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定