requestAnimationFrame 未定义 Next.js 和 React Native Web（动画模块）

Question

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

关于如何解决它有什么建议吗？

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

谢谢你的帮助！

Answer 1

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

Next.js 官方文档

我自己的案例？只是为了展示代码的外观：

import dynamic from 'next/dynamic';

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

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