# @fawazahmed/react-native-read-more 中文文档

规范地址：https://npmcn.com/package/%40fawazahmed/react-native-read-more/

版本：3\.0\.4
npm 元数据更新时间：2024-06-12T08:35:23.046Z
中文译文更新时间：2026-11-14T12:03:14.873Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：36.9 kB，8 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \*，react-native \*
- 首次发布：2020-06-19T09:44:05.609Z
- 最新版本发布：2024-06-12T08:35:22.832Z
- 近 30 天下载量：39647（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 0 个）

## 中文简介

一个简单的反应本地库以收缩的方式显示大块的文本并具有崩溃和扩张的能力.

## 安装

```sh
npm install @fawazahmed/react-native-read-more
```

也可以使用：`pnpm add @fawazahmed/react-native-read-more`、`yarn add @fawazahmed/react-native-read-more`、`bun add @fawazahmed/react-native-read-more`

## README

![NPM Downloads](https://img.shields.io/npm/dm/@fawazahmed/react-native-read-more) ![NPM License](https://img.shields.io/npm/l/@fawazahmed/react-native-read-more) ![NPM Version](https://img.shields.io/npm/v/@fawazahmed/react-native-read-more)

#### 感谢大家的支持!

#### 赞助我的工作 [lfx 众筹](https://crowdfunding.lfx.linuxfoundation.org/projects/react-native-read-more) 或者说 [潮汐运动](https://tidelift.com/funding/github/npm/@fawazahmed/react-native-read-more)。 。 。 .

#### 任何反应- 本地支持, 请访问电子邮件( 以 24 hrs 为响应)

```
fawaz_ahmed@live.com
```

# 反应 - 本地读取 - 更多

反应原生库以收缩的方式显示文本并在需要时进行扩展. 可用于所有平台的本地或博览会。 支持TS/JS两种. 这是一个纯粹的JS解决方案,不需要任何本土依赖.

![Example](https://npmcn.com/package/%40fawazahmed/react-native-read-more/example/seemore.gif)

### 安装

```
npm i @fawazahmed/react-native-read-more --save
```

或者用纱线

```
yarn add @fawazahmed/react-native-read-more
```

### 使用量

```javascript

import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ReadMore from '@fawazahmed/react-native-read-more';

const Home = () => {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore numberOfLines={3} style={styles.textStyle}>
          {
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
          }
        </ReadMore>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
    padding: 16,
  },
  textStyle: {
    fontSize: 14,
  },
});

export default Home;

```

## 道具

| Prop | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `style` | `object or array` | 没有 | 文本样式 |
| `seeMoreText` | `string` | 没有 | 默认为 `See more` |
| `seeMoreStyle` | `object or array` | 没有 | 文本样式 `See more` 文本 |
| `seeLessText` | `string` | 没有 | 默认为 `See less` |
| `seeLessStyle` | `object or array` | 没有 | 文本样式 `See less` 文本 |
| `ellipsis` | `string` | 没有 | 默认为 `...` |
| `wrapperStyle` | `object or array` | 没有 | 包装的样式 `View` |
| `numberOfLines` | `number` | 没有 | 默认为 `3` |
| `animate` | `bool` | 没有 | 默认为 `true` qq应用了微妙的动画来多看少看文字,而不是完整的文字本身 |
| `customTextComponent` | `React component` | 没有 | 默认为 `Text` |
| `expandOnly` | `bool` | 没有 | 默认为 `false` QQ 隐藏比链接的选项少 在职 |
| `onExpand` | `func` | 没有 | 扩展时执行可选召回 |
| `onCollapse` | `func` | 没有 | 崩溃时执行可选召回 |
| `onReady` | `func` | 没有 | 当看到更多位置测量完成时执行可选回调, 此函数将传递 2 个参数 `({ canExpand, expandedLinesCount })`时 `canExpand` 是一个布尔指定,如果文本可以扩展并 `expandedLinesCount` 是一个数字,表示文本处于扩展状态时行数. |
| `collapsed` | `bool` | 没有 | 控制崩溃状态程序 [问题](https://github.com/fawaz-ahmed/react-native-read-more/issues/61) |
| `debug` | `bool` | 没有 | 要检查的打印调试日志 |
| `seeMoreContainerStyleSecondary` | `object` | 没有 | 在文本重叠的情况下,通过{位置:'相对'}见 [问题](https://github.com/fawaz-ahmed/react-native-read-more/issues/52) (不建议) |
| `onSeeMore` | `func` | 没有 | 当一个函数被传递时, 将会禁用默认值 See More toggling 并使用自定义的回调 。 在按下“ See More” 时, 做一些诸如打开一个模式而不是扩展文本之类的事是有用的 . |
| `onSeeLess` | `func` | 没有 | 当一个函数被传递时, 将会禁用默认值 See Less toggling 并使用自定义的回调 。 用于打开一个模式, 而不是按下“ See Less” 键时崩溃文本 . |

任何额外的道具都会传递到下面 `Text` 组件.

# HTML 的使用

HTML渲染不是这个软件包的一部分,但是在任意自定义的html到文本库的帮助下可以轻松完成. 样本代码请参见此 [问题](https://github.com/fawaz-ahmed/react-native-read-more/issues/55#issuecomment-1046941770)

# 运行示例

```
git clone https://github.com/fawaz-ahmed/react-native-read-more.git
cd react-native-read-more/example
yarn install # or npm install

# to run on iOS
yarn ios

#to run on android
yarn android
```

# 为什么还有图书馆?

此模块将计算位置 `See more` 财务报告和审定财务报表 `See less` 在同一段内,而不是使用另一行。 换成是空出 `Text` 组件,您可以通过配置 `numberOfLines` 道具 (英语). 此外,您还可以通过自己的定制执行 `Text` 组件类似 `ParsedText` (单位:千美元)[样本代码](https://github.com/fawaz-ahmed/react-native-read-more/issues/37#issuecomment-1047029209)页:1.

## 用 Jest 进行测试

确保添加 `jest.useFakeTimers();` 您的测试文件. 见 [堆叠流后](https://stackoverflow.com/questions/50793885/referenceerror-you-are-trying-to-import-a-file-after-the-jest-environment-has) 财务报告和审定财务报表 [笑笑计时器](https://jestjs.io/docs/timer-mocks)

## 是否看到问题或任何反馈或特征?

创建一个 [问题](https://github.com/fawaz-ahmed/react-native-read-more/issues) 和吉苏布.

## 解决问题

-   如果你观察 `See more` 总是在机器人中显示,通过道具 `allowFontScaling={false}`,参见此 [问题](https://github.com/fawaz-ahmed/react-native-read-more/issues/17)
-   如果您拥有除此之外的其他嵌入组件 `Text`,参见此 [问题](https://github.com/fawaz-ahmed/react-native-read-more/issues/52)

### 已知问题

`Android only` 若为 `numberOfLines` 值为 `1` 以道具形式传递,在和机器人设备中文本会在行尾重叠。 这是一个问题在 `react-native` 将其它行的文字拼接成第一行,即使我们添加 `\n` 到第一行,线条从那里返回 `onTextLayout` 表示不同的反应. 为了克服这个问题,请使用 `numberOfLines` 大于 `1`。 。 。 .

## 常见问题

### @fawazahmed/react-native-read-more 是什么？

一个简单的反应本地库以收缩的方式显示大块的文本并具有崩溃和扩张的能力\.

### 如何安装 @fawazahmed/react-native-read-more？

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

### @fawazahmed/react-native-read-more 支持 TypeScript 吗？

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

### @fawazahmed/react-native-read-more 支持 ESM 还是 CommonJS？

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

### @fawazahmed/react-native-read-more 可以商用吗？

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

### @fawazahmed/react-native-read-more 的下载量有多少？

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

### @fawazahmed/react-native-read-more 还在维护吗？

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