react-native-auto-expanding-textinput 根据输入的内容自增长高度

直接导入这个react-native-auto-expanding-textinput文件  就可以引用

/**
 * Created by xupy on 2016/12/30.
 */
import React, {
    Component,
    PropTypes
} from 'react';
import {
    View,
    StyleSheet,
    TextInput,
} from 'react-native';

var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');

export default class AutoExpandingTextInput extends Component {

    constructor(props) {
        super(props);
        // initial state
        this.state = {
            height: this.props.minHeight,
            maxHeight: this.props.maxHeight || this.props.minHeight * 3
        };
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }

    static propTypes = {
        onChangeHeight: PropTypes.func.isRequired,
        minHeight: PropTypes.number.isRequired,
        maxHeight: PropTypes.number
    };

    static defaultProps = {};

    componentWillReceiveProps(nextProps) {
        if (nextProps.value === '') {
            this.setState({
                height: this.props.minHeight
            });
        }
    }

    _onChange = (event) => {
        let curHeight = event.nativeEvent.contentSize.height;
        if (curHeight < this.props.minHeight || curHeight > this.state.maxHeight) return;

        if (this.state.height !== curHeight) {
            if (this.props.onChangeHeight) {
                this.props.onChangeHeight(this.state.height, curHeight);
            }
        }

        this.setState({
            height: curHeight
        });
    }
    onContentSizeChange = (params) =>{
        this.setState({
            height: params.nativeEvent.contentSize.height
        });
    }	
    render() {
        let tmpHeight = Math.min(this.state.maxHeight, this.state.height);
        return (
            <TextInput
                {...this.props}
                multiline={true}
                onChange={this._onChange}

                onContentSizeChange={this.onContentSizeChange}
                style={[styles.default, this.props.style, {height: tmpHeight}]}
            />
        );
    }
}

const styles = StyleSheet.create({
    default: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        justifyContent: 'center',
        textAlign: 'left'
    }
});