# @brown-bear/react-native-autoheight-webview 中文文档

规范地址：https://npmcn.com/package/%40brown-bear/react-native-autoheight-webview/

版本：2\.0\.4
npm 元数据更新时间：2025-08-20T09:32:41.829Z
中文译文更新时间：2026-11-08T16:09:43.205Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：19.4 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \*，react-native \*，react-native-webview \>= 13\.13\.2
- 首次发布：2025-08-19T16:01:45.297Z
- 最新版本发布：2025-08-20T09:32:41.634Z
- 近 30 天下载量：8715（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

React Introduct 的自动高地网页视图, 甚至内置 html 的自动宽度

## 安装

```sh
npm install @brown-bear/react-native-autoheight-webview
```

也可以使用：`pnpm add @brown-bear/react-native-autoheight-webview`、`yarn add @brown-bear/react-native-autoheight-webview`、`bun add @brown-bear/react-native-autoheight-webview`

## README

# @brown-bear/ react-native-autoheight-webview (中文(简体) )

用于 React Natural 的自动高度网页视图,支持在 HTML 内含的自动宽度 。 这是原工程的叉子 [90岁](https://github.com/iou90/react-native-autoheight-webview)。 。 。 .

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## \* 特性

-   **自动高度**: 根据内容自动调整网页视图高度
-   **自动宽度**: 支持内置 HTML 内容的自动宽度
-   **交叉平台**: 在iOS和Android两地工作
-   **可自定义**: 支持自定义 CSS、 JavaScript 和样式
-   **业绩优化**: 高效大小计算和更新

## \* 安装

此软件包需要 `react-native-webview` 作为同伴的依赖.

`npm install @brown-bear/react-native-autoheight-webview react-native-webview`

## 使用量

```jsx
import AutoHeightWebView from '@brown-bear/react-native-autoheight-webview'
import { Dimensions } from 'react-native'

<AutoHeightWebView
style={{
width: Dimensions.get('window').width - 15,
marginTop: 35
}}
customScript={document.body.style.background = 'lightyellow';}
customStyle={ * { font-family: 'Times New Roman'; } p { font-size: 16px; } }
onSizeUpdated={size => console.log(size.height)}
files={[{
href: 'cssfileaddress',
type: 'text/css',
rel: 'stylesheet'
}]}
source={{
html: <p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"> Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));"> If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I'd also use the tags "pets", "marriage", "career change", and "travel tips". </span> </p>
}}
scalesPageToFit={true}
viewportContent={'width=device-width, user-scalable=no'}
// Additional react-native-webview props supported
/>
```

## 德莫语

![Demo](https://npmcn.com/package/%40brown-bear/react-native-autoheight-webview/demo.gif) |

你也可以试试 [演示项目](https://github.com/giannistolou/react-native-autoheight-webview-demo) 一个完整的例子.

## API 参考

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| **样式** | `ViewStyle` | \- 说吧 | 组件造型。 对于iOS文本选择问题,将宽度减少15+并增加比值Top 35+ |
| **自定义脚本** | `string` | \- 说吧 | 自定义插入网页视图的 JavaScript 代码 |
| **自定义样式** | `string` | \- 说吧 | 自定义 CSS 内容添加到页面中 `<head>` |
| **已更新** | `function` | \- 说吧 | 高度或宽度变化时触发回调 |
| **文件** | `FileObject[]` | \- 说吧 | 要包含的本地或远程文件阵列 |
| **来源** | `object` | \- 说吧 | WebView 源对象( HTML, URI等) |
| **缩放页** | `boolean` | `false` | 启用页面缩放( 来自反应- 本地- 网页视图默认值的差异) |
| **滚动 Enabled With Zoomedin 选项** | `boolean` | `false` | 允许缩放 iOS 时滚动 |
| **视图** | `string` | `'width=device-width'` (iOS) (中文(简体) ) | 查看端口元标记内容 |
| **显示证书滚动索引** | `boolean` | `false` | 显示垂直滚动指标 |
| **显示 Horizontal 滚动索引** | `boolean` | `false` | 显示水平滚动指标 |
| **来源白名单** | `string[]` | `['*']` | 允许导航来源 |

### 文件对象

```js
interface FileObject {
href: string; // File URL or path
type: string; // MIME type (e.g., 'text/css')
rel: string; // Relationship (e.g., 'stylesheet')
}
```

## 所需经费

-   原生反应 0.78
-   反应-内生-网络视图

## 页:1

以前的版本和移民指南,请参看 [原作者的读取器](https://npmcn.com/package/%40brown-bear/react-native-autoheight-webview/.original_author/README.md)。 。 。 .

> **说明**: Bug修正和新特性仅包含在最新版本中.

## 捐款

欢迎捐款! 请随意提交拉力请求.

## 许可证

这个项目根据麻省理工学院的许可证获得许可.

## ++ 辅助

### 支持原作者( iou90)

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/iou90)

### 支持此叉

[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoffee.com/giannistolou)

## 链接

-   **仓库**数字 : [https://github.com/giannistolou/ react-native-autoheight-webview 页面存档备份,存于互联网档案馆 (简体中文)](https://github.com/giannistolou/react-native-autoheight-webview)
-   **npm 软件包**数字 : [@brown-bear/ react-native-autoheight-webview (中文(简体) )](https://www.npmjs.com/package/@brown-bear/react-native-autoheight-webview)
-   **问题**数字 : [报告错误或请求特性](https://github.com/giannistolou/react-native-autoheight-webview/issues)

* * *

**由反应原住民社区制作**

## 常见问题

### @brown-bear/react-native-autoheight-webview 是什么？

React Introduct 的自动高地网页视图, 甚至内置 html 的自动宽度

### 如何安装 @brown-bear/react-native-autoheight-webview？

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

### @brown-bear/react-native-autoheight-webview 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brown-bear/react-native-autoheight-webview 支持 ESM 还是 CommonJS？

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

### @brown-bear/react-native-autoheight-webview 可以商用吗？

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

### @brown-bear/react-native-autoheight-webview 的下载量有多少？

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

### @brown-bear/react-native-autoheight-webview 还在维护吗？

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