英文:
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时，出现以下警告：
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
...
相关问题：
- https://github.com/expo/ex-navigation/issues/276
- https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
最后一个问题提供了解决方案，但它要求打开 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:
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
It also happen in the browser console:
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'
Related issues:
- https://github.com/expo/ex-navigation/issues/276
- https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
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
要禁用此警告，请将以下内容之一添加到您的测试文件中。
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');
英文:
To disable this warning add either of the following to your test file.
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
or
jest.mock('NativeAnimatedHelp');
In your package.json file
"jest": {
"setupFiles": [
"./mock.js"
],
In mock.js
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
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）创建`jest-setup.js`文件（在我的情况下位于`src/tests`目录）：
**src/tests/jest-setup.js**:
```javascript
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');
// `call`的模拟立即调用回调，这是不正确的
// 因此，我们用一个空操作覆盖它
Reanimated.default.call = () => {};
return Reanimated;
});
2）安装必要的包（在我的情况下只有react-native-reanimated，但你的代码可能会要求其他东西）：
npm install --save-dev react-native-reanimated
3）在package.json中的jest配置中添加一行：
"jest": {
"setupFiles": [
"<rootDir>/src/tests/jest-setup.js"
]
},
如果你的jest-setup.js文件位于其他目录中，请相应更改位置。
经过这些简单的步骤，令人讨厌的警告就消失了。感谢Spencer Carli和他上面链接中的文章。
<details>
<summary>英文:</summary>
Nothing above wasn't working for me, but eventually I've found solution [here][1]:
1) create `jest-setup.js` file (in my case in `src/tests` directory):
**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) 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
3) Add one row to jest config in `package.json`:
"jest": {
"setupFiles": [
"<rootDir>/src/tests/jest-setup.js"
]
},
If your `jest-setup.js` file located in other directory - change location accordingly.
After these simple steps, the annoying warning has gone. Thanks Spencer Carli and his article by link above.
[1]: https://www.reactnativeschool.com/setup-jest-tests-with-react-navigation
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论