https://github.com/ljunb/rn-read-more-text
:page_with_curl:支持设置显示最大行数的折叠/展开文本组件
https://github.com/ljunb/rn-read-more-text
more-text react-native read-mote render-props show-more text
Last synced: 10 months ago
JSON representation
:page_with_curl:支持设置显示最大行数的折叠/展开文本组件
- Host: GitHub
- URL: https://github.com/ljunb/rn-read-more-text
- Owner: ljunb
- License: mit
- Created: 2018-09-11T14:34:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-18T07:12:58.000Z (over 7 years ago)
- Last Synced: 2025-04-14T05:04:39.164Z (about 1 year ago)
- Topics: more-text, react-native, read-mote, render-props, show-more, text
- Language: JavaScript
- Homepage:
- Size: 155 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## rn-read-more-text
[](https://www.npmjs.com/package/rn-read-more-text)
[](https://www.npmjs.com/package/rn-read-more-text)
[](https://www.npmjs.com/package/rn-read-more-text)
[](https://github.com/ljunb/rn-read-more-text/blob/master/LICENSE)
这是一个支持设置行数的可折叠文本组件，具备以下功能：
* 与 `Text` 组件使用方式一致，只是多了两个参数 `limitLines` 和 `renderFooter`
* 如当前文本内容所显示的行数，与最大行数一致，则不显示控制折叠的 `footer` 组件
* `renderFooter` 基于 `render-props` 方式实现，自定义样式和事件响应更自由方便
## 运行示例
## 安装
使用 `npm`：
```
npm install rn-read-more-text --save
```
用 `yarn`：
```
yarn add rn-read-more-text
```
## 使用示例
### 基础使用
```javascript
{this.content}
// render footer
renderFooter = ({ isShowingAll, toggle }) => (
toggle()}
>
{isShowingAll ? "Show less" : "Show more"}
);
```
`renderFooter` 接收一个带有参数的函数，该参数将包含以下属性：`isShowingAll` 和 `toggle`。`isShowingAll` 代表当前组件是否展开，可用于控制渲染不同状态下的UI；`toggle` 用于控制切换组件状态（折叠/展开）。
### 特殊情况
当最终文本内容的行数与设置的最大行数相等时，将不显示 `footer`，如以下情况：
```javascript
This is one line, need not show footer
// 文本内容搞好一行，与 limitLines 相等，将不显示 footer
renderFooter = () =>
```
### 实例引用
另可通过 `ref` 引用主动控制组件折叠和展开：
```javascript
(this.textRef = r)}
style={{ color: "red", fontSize: 16 }}
limitLines={2}
renderFooter={this.renderFooter}
>
{this.content}
// click event
handleManualToggle = () => this.textRef && this.textRef.toggle();
// render footer
renderFooter = ({ isShowingAll, toggle }) =>
```
完整示例见 [example](https://github.com/ljunb/rn-read-more-text/blob/master/example/App.js)。
## 参数说明
名称|类型|默认值|描述
---|---|---|---
...TextProps| | |理论上所有 `Text` 组件的 `props` 都可用，另注意 `numberOfLines` 设置无效，改用 `limitLines` 控制最大行数
limitLines|数字|3|表示最大显示行数
renderFooter|函数|无|用于渲染文本展开，或是折叠时不同的底部组件，其回调参数为：`({ isShowingAll, toggle }) => React.Element`。
`isShowingAll` : `boolean`，代表文本实时状态，用于渲染不同状态组件
`toggle` : `func`，调用后折叠/展开文本
onToggleFinish|函数|无|组件状态修改后的回调，将返回对象，格式如：`onToggleFinish: ({ isShowingAll }) => void`