这是一个支持设置行数的可折叠文本组件，具备以下功能：
- 与
Text组件使用方式一致，只是多了两个参数limitLines和renderFooter - 如当前文本内容所显示的行数，与最大行数一致，则不显示控制折叠的
footer组件 renderFooter基于render-props方式实现，自定义样式和事件响应更自由方便
使用 npm：
npm install rn-read-more-text --save
用 yarn：
yarn add rn-read-more-text
<ReadMoreText
limitLines={2}
renderFooter={this.renderFooter}
>
{this.content}
</ReadMoreText>
// render footer
renderFooter = ({ isShowingAll, toggle }) => (
<Text
style={{ color: "blue", alignSelf: "flex-end" }}
onPress={() => toggle()}
>
{isShowingAll ? "Show less" : "Show more"}
</Text>
);renderFooter 接收一个带有参数的函数，该参数将包含以下属性：isShowingAll 和 toggle。isShowingAll 代表当前组件是否展开，可用于控制渲染不同状态下的UI；toggle 用于控制切换组件状态（折叠/展开）。
当最终文本内容的行数与设置的最大行数相等时，将不显示 footer，如以下情况：
<ReadMoreText limitLines={1} renderFooter={this.renderFooter}>
This is one line, need not show footer
</ReadMoreText>
// 文本内容搞好一行，与 limitLines 相等，将不显示 footer
renderFooter = () => <View />另可通过 ref 引用主动控制组件折叠和展开：
<TouchableOpacity
activeOpacity={0.8}
style={{ backgroundColor: "rgba(1,1,1,0.1)", padding: 10 }}
onPress={this.handleManualToggle}
>
<ReadMoreText
ref={r => (this.textRef = r)}
style={{ color: "red", fontSize: 16 }}
limitLines={2}
renderFooter={this.renderFooter}
>
{this.content}
</ReadMoreText>
</TouchableOpacity>
// click event
handleManualToggle = () => this.textRef && this.textRef.toggle();
// render footer
renderFooter = ({ isShowingAll, toggle }) => <View />完整示例见 example。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| ...TextProps | 理论上所有 Text 组件的 props 都可用，另注意 numberOfLines 设置无效，改用 limitLines 控制最大行数 |
||
| limitLines | 数字 | 3 | 表示最大显示行数 |
| renderFooter | 函数 | 无 | 用于渲染文本展开，或是折叠时不同的底部组件，其回调参数为：({ isShowingAll, toggle }) => React.Element<any>。isShowingAll : boolean，代表文本实时状态，用于渲染不同状态组件toggle : func，调用后折叠/展开文本 |
| onToggleFinish | 函数 | 无 | 组件状态修改后的回调，将返回对象，格式如：onToggleFinish: ({ isShowingAll }) => void |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent