在本机反应中单击 TextInput 字段外部时失去焦点并关闭键盘？

Posted 2023-04-14

【中文标题】在本机反应中单击 TextInput 字段外部时失去焦点并关闭键盘？

【英文标题】：Lose focus and dismiss keyboard on clicking outside of the TextInput field in react native?

【发布时间】：2017-01-23 16:14:48

【问题描述】：

我已经对此进行了研究并找到了这篇文章：

react-native: hide keyboard

但这对我不起作用。当我触摸文本输入字段之外的屏幕部分时，我预计输入字段将失去焦点并且键盘将被关闭。但是，什么都没有发生。光标在输入时一直闪烁。

下面是我试过的代码。请注意，我使用的是 redux-form v6：

import dismissKeyboard from 'dismissKeyboard';

<TouchableWithoutFeedback onPress=()=> dismissKeyboard()>
        <View style=styles.inputWrap>
          <Field name="editLocation" component=TextField />
          <Button onPress=handleSubmit(this.onSubmit)>Sign In</Button>
        </View>
</TouchableWithoutFeedback>

TextField 组件 包含 TextInput。不知道我做错了什么。

我已经在 Genymotion 模拟器上使用三星 S6 图像和我的三星 note 4 测试了代码。

【问题讨论】：

你知道你的TouchableWithoutFeedback的尺寸是多少吗？

换句话说，你知道你的onPress回调是否被调用了吗？

@rclai 完美。感谢您评论您的查询。维度是真正的问题。谢谢。

没问题。如果您不介意，我发布了一个答案，以便您将其标记为正确。

使用滚动视图。 “更好的方法是使用 ScrollView 和 Keyboard.dismiss。当用户在 textInput 之外点击时使用 ScrollView，键盘被关闭。”。这个答案拯救了我的一天***.com/a/43434126/2808371

【参考方案1】：

您需要检查TouchableWithoutFeedback 的尺寸以确保您的onPress 被调用。

【讨论】：

您能否详细说明您的答案？如何检查组件的尺寸？

您可以在 react-native 调试器菜单中使用切换检查器或添加 backgroundColor 来检查它