ios - 在 iOS 上滚动时防止 TextInput 聚焦

Question

我有一个 ScrollView 和一个 TextInput multiline={true} 字段，用作具有动态高度的文本区域，内容从状态读取(它有一个 Text 字段，其中显示文本)。

我的问题是，当 TextInput 增长到几行时，如果我通过在该字段上滑动来滚动屏幕(我没有长按或类似操作)，该字段将触发其 onFocus 事件，键盘将显示。

它不会每次都发生，但它发生的次数足够多，让人非常讨厌。

我尝试将 ScrollView 设置为 keyboardDismissMode="on-drag" 但它没有帮助，在 View 滚动时键盘仍然显示。

<ScrollView keyboardDismissMode="on-drag">
  <TextInput multiline={true} onFocus={() => console.log('boop')}>
    <Text>{this.state.someText}</Text>
  </TextInput>
</ScrollView>

我也尝试过在 TextInput 中没有 Text 字段的情况下执行此操作，并且 onFocus 仍然会启动。

我做错了什么吗？还有什么我可以尝试的，比如检查屏幕是否仍在滚动，blur() 字段是否为 true 或类似的东西？

有什么方法可以让我仅在“明确”点击该字段时才能聚焦该字段？

感谢您的帮助。

Answer 1

这是一个hacky 解决方法:

将 TextInput 包裹在 TouchableOpacity 中，并将 TextInput 的 pointerEvents 属性设置为指向一个状态变量，即 this.state.pointerEvents，并将该变量初始化为 'none'。这会阻止 TextInput 接收任何触摸事件，并允许您在其顶部滑动而无需捕获焦点。

在 TouchableOpacity 的 onPress 属性中，通过将状态变量设置为 'auto' 来启用 pointerEvents > 然后使用对 TextInput 的引用手动分配焦点，即:

this._textInput.focus()


最后，重写 TextInput 的 onBlur 属性并让它重新初始化 pointerEvents 状态回到 'none' 所以在用户完成编辑后它的行为就像以前一样。

解释

它的工作方式是 TouchableOpacity 本质上捕获了通常由 TextInput 消耗的所有触摸事件，但与其余部分的拖动交互用户界面以我们期望的友好方式。当为 TouchableOpacity 触发 onPress 事件时，我们实际上是在谈论真正的新闻事件，而不是错误识别的拖动。

如果您不想使用 TouchableOpacity 的动画，您可以将 activeOpacity 属性分配给 1，或者使用 code>TouchableWithoutFeedback 代替。