# @flyerhq/react-native-link-preview 中文文档

规范地址：https://npmcn.com/package/%40flyerhq/react-native-link-preview/

版本：1\.6\.0
npm 元数据更新时间：2022-04-05T11:32:26.435Z
中文译文更新时间：2026-11-15T02:51:15.915Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40flyerhq/react-native-link-preview
原文对照：https://npmcn.com/package/%40flyerhq/react-native-link-preview/?lang=original
项目主页：https://github.com/flyerhq/react-native-link-preview#readme

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

- 包体积（解压后）：38.1 kB，15 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \*，react-native \*
- 首次发布：2020-10-18T09:58:56.027Z
- 最新版本发布：2022-01-27T21:33:26.271Z
- 近 30 天下载量：23942（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 0 个）

## 中文简介

从提供的文本中提取的 URL 的完全自定义预览 .

## 安装

```sh
npm install @flyerhq/react-native-link-preview
```

也可以使用：`pnpm add @flyerhq/react-native-link-preview`、`yarn add @flyerhq/react-native-link-preview`、`bun add @flyerhq/react-native-link-preview`

## README

# 反应原生链接预览

[![npm](https://img.shields.io/npm/v/@flyerhq/react-native-link-preview)](https://www.npmjs.com/package/@flyerhq/react-native-link-preview) [![build](https://github.com/flyerhq/react-native-link-preview/workflows/build/badge.svg)](https://github.com/flyerhq/react-native-link-preview/actions?query=workflow%3Abuild) [![Maintainability](https://api.codeclimate.com/v1/badges/385762ec7c1e2326fb7f/maintainability)](https://codeclimate.com/github/flyerhq/react-native-link-preview/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/385762ec7c1e2326fb7f/test_coverage)](https://codeclimate.com/github/flyerhq/react-native-link-preview/test_coverage) [![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&suffix=%&query=$.typeCoverage.is&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fflyerhq%2Freact-native-link-preview%2Fmain%2Fpackage.json)](https://github.com/plantain-00/type-coverage)

从提供的文本中提取的 URL 的完全自定义预览 .

![](https://user-images.githubusercontent.com/14123304/119363213-d727b580-bcad-11eb-8678-6e4c4a54621c.png)

## 开始

```sh
yarn add @flyerhq/react-native-link-preview
```

## 使用量

```ts
import { LinkPreview } from '@flyerhq/react-native-link-preview'
// ...
return (
  <LinkPreview text='This link https://github.com/flyerhq can be extracted from the text' />
)
```

## 道具

### 需求

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| 文本 | 字符串 | 从中提取链接的文本 |

### 可选

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| 容器样式 | [视图样式](https://reactnative.dev/docs/view-style-props) | 顶级容器样式 |
| 启用动画 | 布尔 | 启用 `LayoutAnimation` |
| 标题 | 字符串 | 链接上方的文字 |
| 元数据 | [视图样式](https://reactnative.dev/docs/view-style-props) | 标题、描述和最小化图像容器样式 |
| 元数据TextContenerStyle | [视图样式](https://reactnative.dev/docs/view-style-props) | 标题和描述容器样式 |
| ưμ㼯A | (PreviewData) 无效 | 调回已获取的预览数据 |
| 预览数据 | 预览数据 | 要渲染的数据而不是解析提供的文本 |
| 翻译 | (弦声) 反应节点 | 自定义描述渲染道具 |
| 渲染页眉 | (弦声) 反应节点 | 自定义页眉渲染道具 |
| 图像 | (审查数据) 反应节点 | 自定义图像渲染道具 |
| 渲染 Link 预览 | ({方面Ratio?:数量,容器Width:数量,预览数据?:预览数据}}}} 反应节点 | 自定义渲染道具 |
| 制作最小化图像 | (审查数据) 反应节点 | 自定义最小化图像渲染道具 |
| 渲染文本 | (弦声) 反应节点 | 自定义提供的文本渲染道具 |
| 制作主题 | (弦声) 反应节点 | 自定义标题渲染道具 |
| 请求超时 | 编号 | 获取预览数据的请求暂停 |
| 文本容器样式 | [视图样式](https://reactnative.dev/docs/view-style-props) | 文本、标题、描述和尽量减少图像容器样式 |
| 可触摸无后盾 | 无法触摸到背部 | 顶级可触摸道具 |

## 许可证

[麻省理工学院](https://npmcn.com/package/%40flyerhq/react-native-link-preview/LICENSE)

## 常见问题

### @flyerhq/react-native-link-preview 是什么？

从提供的文本中提取的 URL 的完全自定义预览 \.

### 如何安装 @flyerhq/react-native-link-preview？

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

### @flyerhq/react-native-link-preview 支持 TypeScript 吗？

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

### @flyerhq/react-native-link-preview 支持 ESM 还是 CommonJS？

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

### @flyerhq/react-native-link-preview 可以商用吗？

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

### @flyerhq/react-native-link-preview 的下载量有多少？

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

### @flyerhq/react-native-link-preview 还在维护吗？

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