React Native 指定文字行数，超出行数显示更多

短命女 2022-06-09 12:10 313阅读 0赞

纯属于工具类，简单的说一下原理，  
1、在不给text设置numberOfLines的时候计算出text的高度。  
2、给text一个特定的numberOfLines，然后再次计算高度。  
3、比较两次获取的高度，如果第二次获取的高度<最大高度，说明需要换行，回调给页面。  
4、页面通过回调知道需不需要显示“加载更多操作”。

用法：

<MutiRowText
                        style={
       {
       flex:1}}
                        numLines={
       this.state.numLines}
                        onMutiCallBack={
       ()=>{
                            if(!this.state.isMuti){
                                this.setState({
                                    isMuti:true,
                                });
                            }
                        }}
                    >
                        {你的文本信息}
                    </MutiRowText>

然后改变state改变行数：

if(this.state.numLines===null){
                                this.setState({
                                //2行显示
                                    numLines:2,
                                });
                            }else{
                            //显示全部
                                this.setState({
                                    numLines:null,
                                });
                            }

MutiRowText.js：

/**
     * Created by YASIN on 2017/8/21.
     * 字数超过自指定行数后显示更多
     */
    import React, {Component, PropTypes}from 'react';
    import {
        View,
        Text,
        StyleSheet,
    }from 'react-native';
    
    import * as ScreenUtils from '../utils/ScreenUtil';
    import Colors from '../../app/config/colors';
    export default class MutiRowText extends Component {
        
        static propTypes = {
            style: Text.propTypes.style,
            numLines: PropTypes.any,
            onMutiCallBack: PropTypes.func,
            allowFontScaling: PropTypes.bool,
        }
        static defaultProps = {
            allowFontScaling: false,
        }
        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                numLines: null,
                maxHeight: null,
                opacity: 0,
            };
        }
    
        shouldComponentUpdate(newProps, newState) {
            return this.state.numLines !== newProps.numLines;
        }
    
        componentWillReceiveProps(nextProps) {
            if (this.state.numLines !== nextProps.numLines) {
                this.setState({
                    numLines: nextProps.numLines
                });
            }
        }
    
        render() {
            return (
                <Text
                    style={[styles.text,this.props.style,{opacity:this.state.opacity}]}
                    allowFontScaling={
       this.props.allowFontScaling}
                    numberOfLines={
       this.state.numLines}
                    onLayout={(event)=>{
                        let height = event.nativeEvent.layout.height;
                        //第一次测量view的最大高度
                        if(this.state.maxHeight===null&&this.props.numLines){
                            this.state.maxHeight=height;
                            this.setState({
                                numLines:this.props.numLines,
                                opacity:1,
                            });
                        //第二次当测量的最大高度>设置行数后的高度的时候，回调需要换行。
                        }else if(this.props.numLines){
                            if(this.state.maxHeight>height){
                                if(this.props.onMutiCallBack){
       this.props.onMutiCallBack()}
                            }
                        }
                    }}
                >
                    {
       this.props.children}
                </Text>
            );
        }
    }
    const styles = StyleSheet.create({
        text: {
            fontSize: ScreenUtils.scaleSize(28),
            color: Colors.text_dark_grey,
        }
    });

个人笔记，大牛勿喷，欢迎入群交流～～