问题描述
在 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"，可以完美解决输入框与按钮的焦点冲突问题，实现：
- 第一次点击即可触发按钮事件
- 点击空白区域仍能正常收起键盘
- 用户体验更加流畅