React-Native之TextInput实现高度自增长解决方案

前言

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>
        );