如何解决“动画：不支持`useNativeDriver`，因为缺少原生动画模块。”在反应导航中？
Posted
技术标签:
【中文标题】如何解决“动画：不支持`useNativeDriver`，因为缺少原生动画模块。”在反应导航中？【英文标题】：How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation? 【发布时间】：2020-04-22 13:29:43 【问题描述】：我正在开发 expo SDK 版本：36，并且适用于所有平台 (ios/android/web)
第一次安装react-navigation如documentation中所述并运行 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'
相关问题：
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 上工作时我应该注意吗（如果发生）？ 在测试时我应该注意我的应用程序的运行状况吗？在什么情况下？【问题讨论】：
@Yoel 很少有问题应该同时有jest 和 jestjs。 【参考方案1】：您可以放心地忽略此警告。 useNativeDriver 仅在设备上运行代码时才重要。
【讨论】：
有没有办法在不在设备上时禁用它？我应该吗？ @DimitriKopriwa 看到我的回答【参考方案2】：禁用此警告
添加
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');
【讨论】：
文件从 React Native 0.64.0 开始移动：jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')【参考方案3】：
上面没有什么对我不起作用，但最终我找到了解决方案here：
-
创建
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;
);
-
安装必要的包（在我的例子中是
react-native-reanimated，但也许你的代码会问你别的）：
npm install --save-dev react-native-reanimated
-
在
package.json 的 jest 配置中添加一行：
"jest":
"setupFiles": [
"<rootDir>/src/tests/jest-setup.js"
]
,
如果您的 jest-setup.js 文件位于其他目录 - 请相应更改位置。
在这些简单的步骤之后，烦人的警告就消失了。感谢 Spencer Carli 和他的文章，上面的链接。
【讨论】：
以上是关于如何解决“动画：不支持`useNativeDriver`，因为缺少原生动画模块。”在反应导航中？的主要内容，如果未能解决你的问题，请参考以下文章