react-native TextInput 无法自动失去焦点,需要点击多次切换到其他组件

场景描述

比较常见的需求是有个输入框,旁边有个搜索按钮或者发送按钮。点击输入框的时候会唤起虚拟键盘,输入文字点击旁边的按钮或者切换其他组件,点击第一次是收起键盘,无法触发点击事件,需要再点击一次。

解决方案

1.首先认识一下:keyboardShouldPersistTaps

官网描述

keyboardShouldPersistTaps
如果当前界面有软键盘,那么点击 scrollview 后是否收起键盘,取决于本属性的设置。(译注:很多人反应 TextInput 无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将 TextInput 放到 ScrollView 中再设置本属性)

'never' (默认值),点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
'always',键盘不会自动收起,ScrollView 也不会捕捉点击事件,但子组件可以捕获。
'handled',当点击事件被子组件捕获时,键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有 TextInput 的情况下你应该选择此项。
false,已过时,请使用'never'代替。
true,已过时,请使用'always'代替。

类型    必需
enum('always', 'never', 'handled', false, true)

这个是ScrollView的属性,所有继承ScrollView的都有此属性。

2.将TextInput,用ScrollView包裹起来,并且设置此属性为always或者handled(更多的时候用这个)

你可能感兴趣的:(react-native TextInput 无法自动失去焦点,需要点击多次切换到其他组件)