React Native TextInput 模糊消耗 TouchableHighlight 按下事件

Posted 2023-03-15

【中文标题】React Native TextInput 模糊消耗 TouchableHighlight 按下事件

【英文标题】：React Native TextInput blur consumes TouchableHighlight press event

【发布时间】：2016-02-22 00:01:08

【问题描述】：

我有一个<TextInput>，当我点击红色的“发布”按钮时，我想提交一个<TouchableHighlight>。当 TextInput 聚焦时，我完成输入并点击 Post 按钮，键盘关闭但按钮未注册点击。

我尝试使用 TextInput onBlur 事件，但它没有给我触摸点的坐标，所以我不知道触摸点是否真的在按钮上方。

【参考方案1】：

您需要将属性 keyboardShouldPersistTaps=true 添加到您的 ScrollView。

docs 是这么说的：

keyboardShouldPersistTaps bool：

当为 false 时，在焦点文本输入之外点击 keyboard is up 关闭键盘。当为真时，滚动视图将 不捕捉水龙头，键盘不会自动关闭。这 默认值为 false。

【讨论】：

谢谢！顺便说一句，这个选项也可用于 ListView。

仍然没有完全解决问题。如果我也想在文本框外点击以关闭键盘怎么办？我希望点击按钮具有最高优先级，文本框外的所有其他点击都应该关闭键盘。

keyboardShouldPersistTaps 现在不推荐使用布尔值。请改用keyboardShouldPersistTaps="always"。 React native documentation

您找到合适的解决方案了吗？ @坦率

【参考方案2】：

@frank，我想你找到了一个可行的解决方案，但除了“keyboardShouldPersistTaps”之外，如果你将视图包装在一个带有 onPress 的 TouchableWithoutFeedback 元素中，它会调用dismissKeyboard，它应该可以解决这个问题。

 <ScrollView keyboardShouldPersistTaps=true ref='scrollView'>
   <TouchableWithoutFeedback onPress=dismissKeyboard>
     <View>
     -View Content-
     </View>
  </TouchableWithoutFeedback>
</ScrollView>

【讨论】：

如果内容区域中有可点击的元素，这将不起作用。