requestAnimationFrame 没有定义它 Next.js with React Native Web (Animated module)答案

【问题标题】：requestAnimationFrame is not defined it Next.js with React Native Web (Animated module)requestAnimationFrame 没有定义它 Next.js with React Native Web (Animated module)
【发布时间】：2020-04-25 16:01:26
【问题描述】：

我正在研究 Next.js 和 React-Native-Web。我设法按照官方的 Next.js 示例一起运行它们，但是当我尝试使用 react-native 中的 Animated 包时，它失败并出现错误，即 requestAnimationFrame 未定义。基本上这个功能是 node_modules 包的，但是我在 webpack 中设置了别名来翻译所有 react-native 需要到 react-native-web 所以即使是 node_modules 包也应该使用反应原生网络。

有什么解决方法的建议吗？

ReferenceError: requestAnimationFrame is not defined
    at start (...node_modules\react-native-web\
dist\cjs\vendor\react-native\Animated\animations\TimingAnimation.js:104:11)
enter code here

感谢您的帮助！

【问题讨论】：

标签： reactjs react-native next.js requestanimationframe react-native-web

【解决方案1】：

问题在于服务器缺少 RequestAnimationFrame 功能。当 Next.js 在 SSR 期间尝试渲染组件时，会发生此错误。不幸的是，没有用于此目的的 polyfill 等，所以我决定将 Next.js 动态导入用于具有动画功能的组件。

Next.js Official documentation

我自己的案例需要展示代码的外观：

import dynamic from 'next/dynamic';

const AutocompleteDropdown = dynamic(
  () => import(
    'myAwesomeLib/components/dropdown/autocomplete/AutocompleteDropdown'
  ),
  {
    ssr: false,
  }
);

现在您可以使用 AutocompleteDropdown 作为标准 JSX 组件

【讨论】：

我有同样的问题，但仍然无法让它工作，因为实际上在反应导航中，抽屉组件会自动加载动画模块，所以我无法破解使用动态导入它。即使我不使用动画视图，它也会从模块中自动导入。所以我必须为服务器端伪造一个 polyfill 并使用条件来相应地加载 View 或 Animated.View 。但我还不知道如何在代码到达模块之前伪造 polyfill node js。也许在 Webpack 中 next.config.js.
嗯，如果你为你的动画组件创建一些 HOC/Wrapper，你可以在那里检查进程是否在服务器模式下进行，并且在以下情况下你不会渲染动画组件固态硬盘？老实说，我仍然没有找到任何方法为 SSR 创建这样的 polyfill
谢谢，我已经这样做了，我根据ServerSR或ClientSR使用动画视图或简单视图。但正如我所说，React Navigation 模块上的 Drawer Navigator 组件会自动导入 react-native-animated 并自动使用它，并且有一个函数 requestAnimationFrame 根本不存在，无论我是否使用它。现在，我只检查global.requestAnimationFrame 是否存在于_app.js 中，如果不存在，那么我将它设置为一个空函数，就像一个假的polyfill。因为 SSR 无论如何都不需要动画。
这是一个不错的技巧，我会记住的）谢谢@KeitelDOG
@KeitelDOG 感谢您的提示。我正在做一个实验性的 Expo NextJS 项目，我遇到了同样的问题。

【解决方案2】：

我正在尝试使用 requestAnimationFrame 在 NextJs 页面中制作动画，但遇到了一些问题。也许这就是问题所在：代码是服务器端渲染的，requestAnimationFrame 是在客户端运行的？

link

【讨论】：

你说得对，我通过使用 Next.js 动态导入来加载包含动画的适当组件来解决这个问题。看看我的回答，也许对你也有用）