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

纯属于工具类，简单的说一下原理，
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,
    }
});

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