├── .DS_Store ├── README.md ├── demo.gif ├── image ├── dowm.png └── up.png ├── index.js └── package.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/libinWeny/react-native-fold-text/587486b3716cf38469f75c85637ae45fbfbbca82/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Install（安装） 2 | 在你的 React Native App 工程根目录下执行以下命令进行安装: 3 | 4 | ``` 5 | yarn add react-native-fold-text 6 | ``` 7 | 8 | # Usage（使用） 9 | ``` 10 | 11 | import FoldText from "react-native-fold-text"; 12 | 13 | 17 | 18 | 19 | ``` 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
Prop nameTypeDefault
textPropTypes.string
maxLinesPropTypes.number5
38 | 39 | ![图片](https://github.com/17362663079/react-native-fold-text/blob/master/demo.gif) 40 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/libinWeny/react-native-fold-text/587486b3716cf38469f75c85637ae45fbfbbca82/demo.gif -------------------------------------------------------------------------------- /image/dowm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/libinWeny/react-native-fold-text/587486b3716cf38469f75c85637ae45fbfbbca82/image/dowm.png -------------------------------------------------------------------------------- /image/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/libinWeny/react-native-fold-text/587486b3716cf38469f75c85637ae45fbfbbca82/image/up.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by libin on 2018/11/11. 3 | * 字数超过指定行数后 自动折叠 4 | */ 5 | import React, { Component } from 'react'; 6 | import { 7 | View, 8 | Text, 9 | Image, 10 | StyleSheet, 11 | TouchableOpacity, 12 | } from 'react-native'; 13 | 14 | const upIcon = require('./image/up.png'); 15 | const downIcon = require('./image/dowm.png'); 16 | export default class Index extends Component { 17 | 18 | static defaultProps = { 19 | maxLines : 5, 20 | }; 21 | 22 | state = { 23 | maxHeight : null, // 测量得到的文字的高度 24 | maxLines : null, // 文字numberOfLines 属性的值 25 | show : false, // 控制是否显示更多的箭头 26 | text : this.props.text, // 文字内容 27 | }; 28 | 29 | _changeLines(maxLines) { 30 | // 如果 maxLines 存在 说明是折叠状态，取消行数限制 显示全部文字 31 | if (maxLines) { 32 | this.setState({ maxLines : null }) 33 | } else { 34 | this.setState({ maxLines : this.props.maxLines }) 35 | } 36 | } 37 | 38 | _onTextLayout = (event) => { 39 | let height = event.nativeEvent.layout.height; 40 | //第一次测量view的最大高度 41 | if (this.state.maxHeight === null && this.props.maxLines) { 42 | this.setState({ 43 | maxLines : this.props.maxLines, 44 | maxHeight : height 45 | }, () => console.log(this.state.maxLines)); 46 | //第二次当测量的最大高度>设置行数后的高度的时候 显示展开全部的按钮 47 | } else if (this.props.maxLines) { 48 | this.setState({ show : true }) 49 | } 50 | }; 51 | 52 | render() { 53 | const { text, show, maxLines } = this.state; 54 | return ( 55 | 56 | 61 | {text} 62 | 63 | 64 | { 65 | show ? 66 | this._changeLines(maxLines)} 68 | style={styles.btnBox} 69 | > 70 | 71 | 72 | 73 | : null 74 | } 75 | 76 | 77 | ); 78 | } 79 | } 80 | const styles = StyleSheet.create({ 81 | text : { 82 | fontSize : 14, 83 | color : '#555555', 84 | lineHeight : 20, 85 | paddingHorizontal : 15, 86 | marginTop : 10, 87 | }, 88 | btnBox : { 89 | alignItems : 'center', 90 | height : 40, 91 | justifyContent : 'center', 92 | }, 93 | image : { 94 | width : 26, 95 | height : 26, 96 | } 97 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-fold-text", 3 | "version": "1.0.0", 4 | "description": "多文本折叠（Multitext folding）", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/17362663079/react-native-fold-text.git" 12 | }, 13 | "keywords": [ 14 | "Multitext", 15 | "fold-text" 16 | ], 17 | "author": "libinwendy", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/17362663079/react-native-fold-text/issues" 21 | }, 22 | "homepage": "https://github.com/17362663079/react-native-fold-text#readme" 23 | } 24 | --------------------------------------------------------------------------------