react-native TextInput 聚焦情况点击事件需要点击两次才可以触发

keyboardShouldPersistTaps={'handled'}

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

'never' (默认值),点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
'always',键盘不会自动收起,ScrollView也不会捕捉点击事件,但子组件可以捕获。
'handled',当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
但是我反反复复试验之后没有效果。

解决方案:网友的解决方案是对的,错的是我这是一个城市列表,用写的,而我的搜索框是的头部组件ListHeaderComponent 写的,所以我应该是在上加keyboardShouldPersistTaps={'handled'};而不是在TextInput外面再裹一层;

同理:如果是内多个TextInput切换也是会点击2次才回去焦点,处理方法同上;

最后,目的实现了,但是键盘没有收回去,这时我们只好手动触发键盘事件了,也很简单;

先引入‘dismissKeyboard’模块,然后再事件触发dismissKeyboard()方法;搞定;

const dismissKeyboard = require('dismissKeyboard');
 
clearSearch(){
    dismissKeyboard()
}

备注:
在无法点击的组件上添加 keyboardShouldPersistTaps={'handled'}
而不是在TextInput上添加

你可能感兴趣的:(react-native TextInput 聚焦情况点击事件需要点击两次才可以触发)