# @flyskywhy/react-native-browser-polyfill 中文文档

规范地址：https://npmcn.com/package/%40flyskywhy/react-native-browser-polyfill/

版本：2\.0\.2
npm 元数据更新时间：2024-11-27T01:12:21.841Z
中文译文更新时间：2026-11-15T03:11:50.878Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flyskywhy/react-native-browser-polyfill
原文对照：https://npmcn.com/package/%40flyskywhy/react-native-browser-polyfill/?lang=original
项目主页：https://github.com/flyskywhy/react-native-browser-polyfill#readme
源码仓库：https://github.com/flyskywhy/react-native-browser-polyfill

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.3 MB，22 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：7 个
- peer 依赖：@flyskywhy/react-native-gcanvas \*，react \*，react-native \*
- 首次发布：2021-06-17T14:21:36.387Z
- 最新版本发布：2024-11-27T01:12:21.671Z
- 近 30 天下载量：4377（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

浏览器多填充, 并带有本地画布 2d 3d , 用于使 React Industrial 与 zdog 等 web lib相容( 和 pixi.js, 三相js, 相位器.js 待验证)

## 安装

```sh
npm install @flyskywhy/react-native-browser-polyfill
```

也可以使用：`pnpm add @flyskywhy/react-native-browser-polyfill`、`yarn add @flyskywhy/react-native-browser-polyfill`、`bun add @flyskywhy/react-native-browser-polyfill`

## README

# @flysky why/ react-native-browser-polyfill (英语)

由本地画布 2d 3d 为React Introduct 进行浏览器多填充,可以直接使用基于画布的html框架而无需修改代码等. [兹多克语name](https://github.com/metafizzy/zdog)。 。 。 .

`@flyskywhy/react-native-browser-polyfill` 是从 [@ expo/ 浏览器- 填充](https://github.com/expo/browser-polyfill),然后使用 `@flyskywhy/react-native-gcanvas` 改为 `expo-2d-context`,使用时 `event-target-shim` 改为 `fbemitter`,并修复一些错误.

### 安装

```bash
npm install @flyskywhy/react-native-browser-polyfill @flyskywhy/react-native-gcanvas
```

跟着 [安装步骤@ flyskywhy/ react-native-gcanvas](https://github.com/flyskywhy/react-native-gcanvas#react-native)。 。 。 .

### 使用量

将库导入到您的工程根 `/index.js` , (中文(简体) ), `/index.android.js` , (中文(简体) ), `/index.ios.js` 或者说 `/index.native.js`。 。 。 .

如果您不想在项目根中导入它,您也可以将库导入到任何想要使用它的JavaScript文件. 不过如果 `inlineRequires` 真实的在你 `metro.config.js`你会得到 `ERROR ReferenceError: Can't find variable: document` 或者说 `ERROR ReferenceError: Property 'document' doesn't exist, js engine: hermes`,那么你应该改变 `inlineRequires` 以伪造或导入库到您的工程根中, 例如 . `/index.android.js`。 。 。 .

```js
import '@flyskywhy/react-native-browser-polyfill';
```

如果需要2d或3d帆布,请参见: [@flysky why/ react-native-gcanvas (英语)](https://github.com/flyskywhy/react-native-gcanvas),或只是参考 [Zdogand Tests.js (英语)](https://github.com/flyskywhy/GCanvasRNExamples/blob/master/app/components/ZdogAndTests.js)。 。 。 .

## 示例

### 兹多克语name

无需修改任何框架代码 [兹多克语name](https://github.com/metafizzy/zdog) 自己来.

只修改一个应用演示的行码 [由 Zdog 代码Pen 收藏制作](https://codepen.io/collection/DzdGMe/),例如仅仅修改 `.zdog-canvas` 内 `JS` 联 合 国 [https://codepen.io/clarke-nicol/pen/OezRdM 页面存档备份,存于互联网档案馆](https://codepen.io/clarke-nicol/pen/OezRdM) 输入 `this.canvas` 在此 GCanvasRN 示例 APP 中执行 [反应 - > 反应-内在 : `Zdog and Tests` 步骤3 Zdog的功用不错](https://github.com/flyskywhy/GCanvasRNExamples/commit/7855e91)。 。 。 .

这是因为 [Zdogand Tests.js (英语)](https://github.com/flyskywhy/GCanvasRNExamples/blob/master/app/components/ZdogAndTests.js),可以直接发现 `render` 财务报告和审定财务报表 `mousemove` 与 html 原始版本相同 [https://codepen.io/clarke-nicol/pen/OezRdM 页面存档备份,存于互联网档案馆](https://codepen.io/clarke-nicol/pen/OezRdM)。 。 。 .

![](https://raw.githubusercontent.com/flyskywhy/react-native-browser-polyfill/master/assets/zdog-and-tests.gif)

## 执行

## 管理部

DOM得到的支持非常低,这些用于像验证类型的pixi.js这样的libs.

```js
class Node
class Element
class Document
class HTMLImageElement
class Image
class ImageBitmap
class HTMLVideoElement
class Video
class HTMLCanvasElement
class Canvas
```

### 图像, HTML 图像元素, 图像比特地图

图像可以装入 `https://somewhere.com/some.png` 或来自Android、iOS和Web上的要求(some.png"),参见 [Zdogand Tests.js (英语)](https://github.com/flyskywhy/GCanvasRNExamples/blob/master/app/components/ZdogAndTests.js) 或者说 [非声明性.js](https://github.com/flyskywhy/GCanvasRNExamples/blob/master/src/nonDeclarative.js)。 。 。 .

```js
const image = document.createElement('img');
const image = new global.HTMLImageElement();
const image = new Image();

image.onload = () => console.log('Can recieve event load by onload');
image.addEventListener('load', () => console.log('Also can recieve event load by addEventListener');
```

### HTML 坎瓦斯元素

[@flyskywhy/ react-native-gcanvas的用法](https://github.com/flyskywhy/react-native-gcanvas#example-as-usage)

`document.createElement('canvas')` (作为外屏画布)的使用情况也在 `src/window.js`。 。 。 .

### 窗口为全局

```js
addEventListener;
removeEventListener;
dispatchEvent;
Buffer;
TextDecoder;
TextEncoder;
document;
Document;
Element;
Image;
HTMLImageElement;
ImageBitmap;
CanvasRenderingContext2D;
WebGLRenderingContext;
// window.devicePixelRatio; // undefined as described in `src\resize.js`
window.screen.orientation;
userAgent;
location;
```

### 文档

```js
document.createElement;
document.createElementNS;
```

### 元素

#### 所有大小返回窗口大小 :

```js
element.clientWidth;
element.clientHeight;
element.innerWidth;
element.innerHeight;
element.offsetWidth;
element.offsetHeight;
element.getBoundingClientRect;
element.getAttribute;
element.setAttribute;
```

#### 防止库崩溃的空属性

```js
element.tagName;
element.setAttributeNS;
element.focus;
```

### 节点

```js
node.ownerDocument;
node.className;
node.addEventListener;
node.removeEventListener;
node.dispatchEvent;
node.appendChild;
node.insertBefore;
node.removeChild;
```

# 外部图书馆

一些外接节点.js多填充器也被添加.

## [文本编码](https://github.com/inexorabletash/text-encoding)

```
global.TextEncoder
global.TextDecoder
```

## [页:1](https://github.com/zeligzhou/xmldom-qsa)

```
window.DOMParser
```

## 常见问题

### @flyskywhy/react-native-browser-polyfill 是什么？

浏览器多填充, 并带有本地画布 2d 3d , 用于使 React Industrial 与 zdog 等 web lib相容\( 和 pixi\.js, 三相js, 相位器\.js 待验证\)

### 如何安装 @flyskywhy/react-native-browser-polyfill？

在项目目录运行 npm install @flyskywhy/react-native-browser-polyfill，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@flyskywhy/react-native-gcanvas（\*）、react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flyskywhy/react-native-browser-polyfill 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flyskywhy\_\_react-native-browser-polyfill 是否存在。

### @flyskywhy/react-native-browser-polyfill 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @flyskywhy/react-native-browser-polyfill 可以商用吗？

@flyskywhy/react-native-browser-polyfill 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flyskywhy/react-native-browser-polyfill 的下载量有多少？

根据 npm 官方下载统计，@flyskywhy/react-native-browser-polyfill 在 2026/10/15 – 2026/11/13 这 30 天内被下载 4,377 次，日均约 146 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flyskywhy/react-native-browser-polyfill 还在维护吗？

最新版本 2\.0\.2 发布于 2024/11/27（2 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/06/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。