身为一个web开发者，从来没想到自己会被一个小小的文本输入框折腾成这样。
最近在使用TextInput组件过程中，遇到的一些问题，在此做个分享和记录。
1.键盘遮挡
在web开发时，我们不需要考虑键盘的遮挡，因为系统会自动处理，但是在native这方面需要手动处理，还好官方已经出品了原生解决方案：KeyboardAvodingView。
android可以通过设置
android:windowSoftInputMode="adjustPan"系统自动处理键盘遮挡，这种情况下不需要使用该组件
先上代码
<KeyboardAvoidingView
style={{flex:1}}
behavior="padding"
keyboardVerticalOffset={64}
>
<ScrollView style={{flex:1}}>
{/*.....*/}
</ScrollView>
</KeyboardAvoidingView>
看下文档便知，比较有用的就是这两个属性了
keyboardVerticalOffsetbehavior
keyboardVerticalOffset
有些情况下你的视图可能距离屏幕顶部有一段距离，这个时候需要用这个进行修正。
网上教程很少详细说这个属性，但是这个属性非常重要。
先让我们看下KeyboardAvoidingView源码的实现
relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
const frame = this.frame;
if (!frame || !keyboardFrame) {
return 0;
}
const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset;
// Calculate the displacement needed for the view such that it
// no longer overlaps with the keyboard
return Math.max(frame.y + frame.height - keyboardY, 0);
},
onKeyboardChange(event: ?KeyboardChangeEvent) {
if (!event) {
this.setState({bottom: 0});
return;
}
const {duration, easing, endCoordinates} = event;
const height = this.relativeKeyboardHeight(endCoordinates);
if (duration && easing) {
LayoutAnimation.configureNext({
duration: duration,
update: {
duration: duration,
type: LayoutAnimation.Types[easing] || 'keyboard',
},
});
}
this.setState({bottom: height});
},
可以看到该组件其实是在键盘打开关闭状态改变的时候，更新了botttom这个状态，而这个值是通过坐标计算而来的。
this.frame 是组件的根节点View onLayout回调得到值。
这里先用虚拟键盘在屏幕的y坐标减去了传入的keyboardVerticalOffset获取到键盘的y轴偏移量，然后frame.y + frame.height计算出容器距离父元素顶部的距离，减去键盘的y轴偏移量，就得出了容器需要偏移的距离。
为什么要减去一个偏移量呢？打个比方，我们的页面都会有状态栏，会有头部（例如使用react-navigation），这个时候我们在使用KeyboardAvoidingView的时候，可能并没有从屏幕顶部进行包裹，因为onLayout得到的y坐标是相对于父元素的，所以就会造成键盘的screenY和frame.y没有以一个起点作为参考，所以需要手动修正这一块距离。
其实把计算改成：
return Math.max(frame.y + this.props.keyboardVerticalOffset + frame.height - keyboardFrame.screenY, 0);
这样就比较好理解了。
behavior
顾名思义就是以何种方式处理，看源码得知主要做了如下处理
- height
键盘打开时把容器的高度减去了上面计算出来的bottom的值，关闭时又恢复原来大小 - padding
键盘打开时给容器设置了paddingBottom: bottom - position
键盘打开时给容器设置了bottom:bottom，也就是让容器向上偏移bottom大小距离
到底使用哪一个呢，个人觉得还是看使用场景吧。
问题
如果我们的输入框在一个ScrollView里面，像我们上面写的那个demo一样，而KeyboardAvoidingView在底部加入了paddingBottom，仅仅是压缩了ScrollView的高度，这样本来位置靠下的输入框能显示吗？
结果是可以。
如图所示，ScrollView自动就滚到输入框的位置了。
这也是最令人困惑的地方。同事说可能是react-native内部做了什么处理。希望研究过的同学解答下。
2.android设置textAlign引发的bug
BUG-1
如果同时设置了textAlign和height属性，那么只要手指在TextInput上横向滑动几下，placeholder就不见了，光标也不见了，键盘却能弹出，也能正常输入，但是不显示，用手指再去触摸一下，文字就出来了。。。
ios无此问题。
解决办法：对android不设置高度。
BUG-2
https://github.com/facebook/react-native/issues/12167
https://github.com/facebook/react-native/issues/15764
https://github.com/facebook/react-native/issues/17135
当对TextInput组件设置textAlign为right或者center时，当手指触摸到TextInput上方时，外层的ScrollView将中断滚动，而且TextInput会获取到焦点，键盘弹出。当textAlign为left时则不会有此问题。这个问题仅在android手机上会出现。
提出这个问题的人不少，但是没有找到官方的解决方案。
有人指出使用multiline 和 keyboardType: default 可以解决，尝试了下确实可以，但是实际上我们可能不需要multiline，而且keyboardType为其他类型时，placeholder的文字就会显示了，简直是个迷。。。
还好有人在提出了一个hack写法。
focusInput = () => {
const { textInput } = this;
if (!textInput) return;
if (textInput.isFocused()) {
textInput.blur();
setTimeout(() => textInput.focus(), 500);
} else {
textInput.focus();
}
}
...
<View style={styles.textBox}>
<TextInput
style={styles.textInput}
placeholder={placeholder}
underlineColorAndroid="transparent"
autoCorrect={false}
spellCheck={false}
placeholderTextColor="#a8afc3"
selectionColor="#0064ff"
ref={this.inputRef}
{...rest}
/>
<TouchableOpacity
style={StyleSheet.absoluteFill}
onPress={this.focusInput}
/>
</View>
原理就是屏蔽了textinput本身的手势，在上面覆盖一个手势遮罩，自己处理textInput的获取焦点和失去焦点。经过尝试，这种方案感觉是可行的，目前还没发有发现明显的问题。
======= 6月20日更新 ========
最新发现了一个问题，由于textinput被覆盖了，导致无法进行长按复制粘贴了=。=||。
于是修改了一些逻辑，即在获取焦点后，让覆盖层消失。
