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

Question

我正在研究 Next.js 和 React-Native-Web。我设法按照官方 Next.js 示例将它们一起运行，但是当我尝试使用 react-native 中的 Animated 包时，它失败并显示 的错误。 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 Official documentation
我自己的案例必须展示代码的外观:

import dynamic from 'next/dynamic';

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

现在您可以使用 自动完成下拉作为标准的 JSX 组件