React Native集成p5js canvas移动端报错ReferenceError: document未定义

报错根因 #

p5.js是面向浏览器环境设计的图形库，底层强依赖浏览器提供的document、window等BOM/DOM全局对象。React Native移动端原生运行环境不存在这些浏览器专属全局变量，你尝试的react-p5-wrapper、react-p5、原生p5均为web端适配版本，只要引入就会在库初始化阶段访问document对象，因此哪怕不调用任何相关能力也会触发报错，web端能正常运行就是因为浏览器自带这些全局对象。

可落地的解决路径 #

• 最低改造成本方案：使用react-native-webview组件承载已经开发完成的p5 web页面，WebView内部自带完整浏览器环境，可直接兼容所有p5原有逻辑，不需要改动p5相关代码。
• 原生渲染方案：使用react-native-skia库重写绘图逻辑，Skia是原生端高性能绘图引擎，完全不依赖浏览器环境，性能优于WebView方案，但需要把原有p5逻辑全部重写。
• 轻量场景兼容方案：在App入口代码最顶部先引入React Native DOM/BOM polyfill，模拟出document等全局对象后再引入p5相关代码，该方案仅适合仅使用了p5纯canvas绘图能力的简单场景，p5的DOM相关API无法正常运行，适配成本较高。

内容的提问来源于stack exchange，提问作者Dmitry Tabakerov