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

Question

我正在研究 Next.js 和 React-Native-Web。我按照官方 Next.js 示例设法将它们运行在一起，但是当我尝试使用 react-native 中的 Animated 包时，它失败并显示 requestAnimationFrame[=24 错误=] 未定义。基本上，此功能执行 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 在 NextJs 页面中制作动画，但我遇到了一些问题。也许这就是问题所在：代码是服务器端呈现的，而 requestAnimationFrame 是针对客户端的运行?

link

Answer 2

问题出在服务器上缺少 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 组件

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

requestAnimationFrame is not defined it Next.js with React Native Web (Animated module)

requestanimationframe

reactjs

react-native

next.js

react-native-web