近日使用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
},
})
