这是一个支持设置行数的可折叠文本组件，具备以下功能：
与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 |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
