直接导入这个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' } });