React Native - 文档未定义

Question

我正在将一个基于 Cordova 的移动应用程序移植到 React Native 上。这个 Cordova 应用程序依赖于第三方 JavaScript 库 Kandy.Io。

这个库使用了全局的 document 对象。当我将该库导入到我的 React Native 项目中时，会看到以下错误：

document is not defined 

我知道在React Native项目中没有像浏览器环境中的DOM，但是否有任何方法可以使用文档对象，以便我可以继续使用此库？

- jackflannery

---

根据上下文而定——在React Native中没有“文档对象”，因为没有DOM，所以取决于您如何使用文档对象，这将影响您如何重写代码以考虑没有文档的情况。 - Nick Zuber

看起来如果你想要进行“DOM”样式的操作，你需要通过直接操作编辑setNativeProps属性。 - peteb

听起来你需要检查是否有可用的同构版本的库（提示：最好提到实际的库，以防万一其他人之前遇到过这个问题，他们可以帮助你） - Mike 'Pomax' Kamermans

@NickZuber 你能给我指个明确的方向，告诉我如何为一个已存在的库编写一个shim吗？我似乎找不到任何相关资料。 - Trip

也许这个问题可以帮助你：https://dev59.com/JJ3ha4cB1Zd3GeqPX6zB - H. Pauwelyn

我在删除节点模块并重新安装后，目前也遇到了这个问题。 - Website Is Fun

Answer 1

当我使用react native webgl和threejs时，出现了“未定义文档”的问题。

简短概述：Textureloader无法工作，因为它需要一个imageloader，而imageloader需要不可访问的DOM。

显然有一个名为THREE.Texture的函数，我是这样使用它的：

let texture = new THREE.Texture(
     url //URL = a base 64 JPEG string in this case     
     );

var img = new Image(128, 128);
img.src = url;
texture.normal = img;

正如您所看到的，我使用了一个Image构造函数，这是来自React Native并像这样导入：

import { Image } from 'react-native';

在 react native文档中，它将解释如何使用它，支持base64编码的JPEG。

在您的情况下，您可以尝试类似的方法，所以您应该查看哪个函数使用文档，然后覆盖该函数或使用react native提供的功能绕过它。

- robertjuh