优化结果:
1,滚动则收回键盘(若键盘弹出)
2,点击其它位置收回键盘(若键盘弹出)
3,当焦点位于TextInput(键盘弹出),一次点击其它组件即可成为响应者,而不是TextInput相应blur事件收回键盘。
4,键盘弹起遮盖输入框则自动滚动页面以显示
代码结构
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps
>
<TouchableWithoutFeedback onPress={() => dismissKeyboard()}>
<KeyboardAvoidingView behavior="position" keyboardVerticalOffset={64}>
<TextInput />
{/*其它要相应点击事件的组件,在响应时调用dismissKeyboard()*/}
<TextInput />
<TextInput />
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
</ScrollView>
注释
dismissKeyboard是react native自带的库,需引入
import dismissKeyboard from 'dismissKeyboard';