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

问题描述

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

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

问题原因

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

解决方案

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

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

属性值说明

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

总结

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

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