前言

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

方法

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

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

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

使用：

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