{"id":26214430,"url":"https://github.com/ljunb/rn-read-more-text","last_synced_at":"2025-08-05T12:19:52.772Z","repository":{"id":92176831,"uuid":"148331326","full_name":"ljunb/rn-read-more-text","owner":"ljunb","description":":page_with_curl:支持设置显示最大行数的折叠/展开文本组件","archived":false,"fork":false,"pushed_at":"2018-09-18T07:12:58.000Z","size":159,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T05:04:39.164Z","etag":null,"topics":["more-text","react-native","read-mote","render-props","show-more","text"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ljunb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-11T14:34:39.000Z","updated_at":"2020-07-15T07:23:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"b7895d2b-c470-479d-892b-7ca117b91f61","html_url":"https://github.com/ljunb/rn-read-more-text","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-read-more-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-read-more-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-read-more-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-read-more-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ljunb","download_url":"https://codeload.github.com/ljunb/rn-read-more-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249130948,"owners_count":21217643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["more-text","react-native","read-mote","render-props","show-more","text"],"created_at":"2025-03-12T10:16:57.670Z","updated_at":"2025-04-15T18:41:48.144Z","avatar_url":"https://github.com/ljunb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## rn-read-more-text\n\n[![npm](https://img.shields.io/npm/v/rn-read-more-text.svg)](https://www.npmjs.com/package/rn-read-more-text)\n[![npm](https://img.shields.io/npm/dm/rn-read-more-text.svg)](https://www.npmjs.com/package/rn-read-more-text)\n[![npm](https://img.shields.io/npm/dt/rn-read-more-text.svg)](https://www.npmjs.com/package/rn-read-more-text)\n[![npm](https://img.shields.io/npm/l/rn-read-more-text.svg)](https://github.com/ljunb/rn-read-more-text/blob/master/LICENSE)\n\n这是一个支持设置行数的可折叠文本组件，具备以下功能：\n * 与 `Text` 组件使用方式一致，只是多了两个参数 `limitLines` 和 `renderFooter`\n * 如当前文本内容所显示的行数，与最大行数一致，则不显示控制折叠的 `footer` 组件\n * `renderFooter` 基于 `render-props` 方式实现，自定义样式和事件响应更自由方便\n\n ## 运行示例\n ![demo](https://github.com/ljunb/screenshots/blob/master/read-more-text.png)\n\n ## 安装\n\n使用 `npm`：\n```\nnpm install rn-read-more-text --save\n```\n用 `yarn`：\n```\nyarn add rn-read-more-text\n```\n\n## 使用示例\n### 基础使用\n```javascript\n\u003cReadMoreText\n  limitLines={2}\n  renderFooter={this.renderFooter}\n\u003e\n  {this.content}\n\u003c/ReadMoreText\u003e\n\n// render footer\nrenderFooter = ({ isShowingAll, toggle }) =\u003e (\n  \u003cText\n    style={{ color: \"blue\", alignSelf: \"flex-end\" }}\n    onPress={() =\u003e toggle()}\n  \u003e\n    {isShowingAll ? \"Show less\" : \"Show more\"}\n  \u003c/Text\u003e\n);\n```\n`renderFooter` 接收一个带有参数的函数，该参数将包含以下属性：`isShowingAll` 和 `toggle`。`isShowingAll` 代表当前组件是否展开，可用于控制渲染不同状态下的UI；`toggle` 用于控制切换组件状态（折叠/展开）。\n\n### 特殊情况\n当最终文本内容的行数与设置的最大行数相等时，将不显示 `footer`，如以下情况：\n```javascript\n\u003cReadMoreText limitLines={1} renderFooter={this.renderFooter}\u003e\n  This is one line, need not show footer\n\u003c/ReadMoreText\u003e\n\n// 文本内容搞好一行，与 limitLines 相等，将不显示 footer\nrenderFooter = () =\u003e \u003cView /\u003e\n```\n\n### 实例引用\n另可通过 `ref` 引用主动控制组件折叠和展开：\n```javascript\n\u003cTouchableOpacity\n  activeOpacity={0.8}\n  style={{ backgroundColor: \"rgba(1,1,1,0.1)\", padding: 10 }}\n  onPress={this.handleManualToggle}\n\u003e\n  \u003cReadMoreText\n    ref={r =\u003e (this.textRef = r)}\n    style={{ color: \"red\", fontSize: 16 }}\n    limitLines={2}\n    renderFooter={this.renderFooter}\n  \u003e\n    {this.content}\n  \u003c/ReadMoreText\u003e\n\u003c/TouchableOpacity\u003e\n\n// click event\nhandleManualToggle = () =\u003e this.textRef \u0026\u0026 this.textRef.toggle();\n\n// render footer\nrenderFooter = ({ isShowingAll, toggle }) =\u003e \u003cView /\u003e\n```\n\n完整示例见 [example](https://github.com/ljunb/rn-read-more-text/blob/master/example/App.js)。\n\n## 参数说明\n名称|类型|默认值|描述\n---|---|---|---\n...TextProps| | |理论上所有 `Text` 组件的 `props` 都可用，另注意 `numberOfLines` 设置无效，改用 `limitLines` 控制最大行数\nlimitLines|数字|3|表示最大显示行数\nrenderFooter|函数|无|用于渲染文本展开，或是折叠时不同的底部组件，其回调参数为：`({ isShowingAll, toggle }) =\u003e React.Element\u003cany\u003e`。\u003cbr/\u003e\u003cbr/\u003e`isShowingAll` : `boolean`，代表文本实时状态，用于渲染不同状态组件\u003cbr/\u003e`toggle` : `func`，调用后折叠/展开文本\nonToggleFinish|函数|无|组件状态修改后的回调，将返回对象，格式如：`onToggleFinish: ({ isShowingAll }) =\u003e void`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljunb%2Frn-read-more-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fljunb%2Frn-read-more-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljunb%2Frn-read-more-text/lists"}