前言

TextInput在部分业务场景下， 需要随着字体多少进行高度自行调节，那么这个效果如何实现呢？

方法

为了方便重用，我们定义一个公用的组件：

class AutoExpandingInput extends Component{ onContentSizeChange(event) { this.setState({height: event.nativeEvent.contentSize.height}); } render() { return ( <TextInput {...this.props} multiline={true} onChange={this.onChange} onContentSizeChange={this.onContentSizeChange.bind(this)} style={[styles.textInputStyle,{height:Math.max(35,this.state.height)}]} value={this.state.text} /> ); } }

这里主要使用Math函数，和onContentSizeChange监听当前尺寸变化，更新state。

使用：

render() { return ( <View style={styles.container}> <AutoExpandingInput style={styles.textInputStyle} onChangeText={this._onChangeText} /> </View> );