近日使用rn开发电商app遇到一个再简单不过的需求：买家申请退款，填写申请单，其中有一个多行文本输入框用于填写退款理由，如图所示：

看似简单的需求，然而用rn开发还是会遇到问题。

页面搭建

两个View和一个TextInput足矣，外层View白色背景色，内层View提供边框。如果你在安卓环境下运行项目会发现TextInput下面有一条黑线，将underlineColorAndroid设置为true既可解决。同时，将paddingVertical设置为0解决TextInput文字不垂直居中的问题。

<View style = {styles.container} >
    <View style = {styles.inputContainer} >
        <TextInput
            placeholder = {'输入退款说明'} 
            placeholderTextColor = {'#BBBBBB'}
            underlineColorAndroid = {'transparent'} 
            style = {{paddingVertical: 0, paddingLeft: 5, fontSize: 16}}
         />
    </View>
</View>

运行结果如图所示：

问题

我们更改一下TextInput的背景色，发现此时TextInput的高度为一行文字的高度，并且，当输入较长的内容后，文字仍然排成一行而不是单起一行。

既然这样，我们将TextInput的高度设置为其外层的容器高度，并指定其为多行文本：

<TextInput
    placeholder = {'输入退款说明'} 
    placeholderTextColor = {'#bbbbbb'}
    underlineColorAndroid = {'transparent'} 
    multiline
    style = {{paddingVertical: 0, paddingLeft: 5, fontSize: 16, height: 105}}
/>

效果如图：

现在，整个内层容器都是文本框了，但是文本框的内容却是垂直居中的，很明显与设计不符。通过翻阅rn的源码发现，TextInput是原生代码实现的，前端将justifyContent设置为flex-start仍然不能解决该问题。产品经理也肯定不会接受这种解决方案。

解决方案

思路就是动态修改TextInput的高度，其高度由内容行数决定，这样就能保证内容始终是紧靠顶端的。然后，为TextInput的外层容器绑定onPress事件，当点击容器时自动聚焦TextInput，形成“整个容器都是TextInput”的假象。

constructor(props) {
    super(props);
    this.state = {
        height: 30
    }
}

cauculateHeight(e) {
    const height = e.nativeEvent.contentSize.height > 30 ? e.nativeEvent.contentSize.height : this.state.height;
    this.setState({height});
}

<TouchableOpacity 
    activeOpacity = {1}
    style = {styles.inputContainer} 
    onPress = {() => this.TextInput.focus()} 
>
    <TextInput
        placeholder = {'输入退款说明'} 
        placeholderTextColor = {'#bbbbbb'}
        underlineColorAndroid = {'transparent'} 
        multiline
        ref = {textInput => this.TextInput = textInput}
        onContentSizeChange = {e => this.cauculateHeight(e)}
        style = {[{paddingVertical: 0, paddingLeft: 5, fontSize: 16}], {height: this.state.height}]}
    />
</TouchableOpacity>

当内容超过容器高度后，超出的部分被隐藏了，给TextInput添加maxHeight样式解决该问题（maxHeight值为容器高度）。

<TextInput
    ...
    style = {[{paddingVertical: 0, paddingLeft: 5, fontSize: 16, maxHeight: 105}], {height: this.state.height}]}
/>

完整代码如下，已去除业务代码：

class MultipleLineInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: 30,
            inputValue: ''
        }
    }
    //动态计算TextInput高度来解决TextInput文字始终垂直居中的问题
    cauculateHeight(e){
        if (e.nativeEvent.contentSize.height > 30) {
            height = e.nativeEvent.contentSize.height;
          } else {
            height = this.state.height;
          }
          this.setState({
            height: height
          })
    }
    changeText(text){
        this.setState({
            inputValue: text
        })
    }
    render() {
        return (
            <View style = {styles.textInputOuter} >
                <TouchableOpacity activeOpacity = {1} style = {styles.textInputInner} onPress = {() => this.TextInput.focus()} >
                    <TextInput
                        placeholder = {'请输入文本内容'}
                        placeholderTextColor = {'#666666'}
                        underlineColorAndroid = {'transparent'}
                        multiline
                        numberOfLines = {5}
                        value = {this.state.inputValue}
                        ref = {textInput => this.TextInput = textInput}
                        onContentSizeChange = {e => this.cauculateHeight(e)}
                        onChangeText = {text => this.changeText(text)}
                        style = {[styles.textInput, {height: this.state.height}]}
                    />
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    textInputOuter: {
        height: 120,
        alignItems: 'center',
        paddingHorizontal: 15,
        paddingBottom: 0
    },
    textInputInner: {
        height: 105,
        width: Dimensions.get('window').width - 30,
        borderWidth: 1,
        borderColor: '#eeeeee'
    },
    textInput: {
        paddingVertical: 0,
        fontSize: 16,
        color: '#333333',
        maxHeight: 105
    },
})