问题描述

在 React Native 0.70.3 版本中，当页面同时存在输入框（TextInput）和按钮（Button）时，会出现以下问题：

输入框获得焦点并弹出键盘
点击按钮时，输入框先失去焦点，键盘收起
按钮点击事件未被触发
需要第二次点击才能正确触发按钮事件

问题原因

这是 React Native 的默认行为。当输入框获得焦点后，系统会优先处理键盘收起逻辑，导致第一次点击被"消耗"在收起键盘上，而不是触发按钮事件。

解决方案

在包裹页面的 ScrollView 组件上添加 keyboardShouldPersistTaps 属性：

复制代码

<ScrollView keyboardShouldPersistTaps="handled">
  <TextInput 
    style={styles.input} 
    placeholder="请输入内容" 
  />
  <Button 
    title="提交" 
    onPress={() => console.log('按钮被点击了！')} 
  /></ScrollView>

属性值说明

属性值	行为描述	推荐程度
`handled`	如果点击事件被子组件处理，键盘不会自动收起	推荐
`never`	点击非输入框区域会收起键盘，第一次点击不触发子组件事件	不推荐
`always`	键盘不会自动收起	按需使用

总结

通过在 ScrollView 上设置 keyboardShouldPersistTaps="handled"，可以完美解决输入框与按钮的焦点冲突问题，实现：

第一次点击即可触发按钮事件
点击空白区域仍能正常收起键盘
用户体验更加流畅

ITPub博客

React Native 输入框与按钮焦点冲突解决方案（rn版本0.70.3）

问题描述

问题原因

解决方案

属性值说明

总结

最新文章