React-Native Android端点击时钟后键盘无法关闭的解决方法

核心原因 #

Android端默认不会在点击非输入类组件时自动收起软键盘，需要手动触发键盘关闭逻辑。

具体解决方案 #

方案1：给时钟组件添加触摸事件手动关闭键盘

1. 导入React Native的Keyboard API：

import { Keyboard } from 'react-native';

2. 给时钟组件绑定触摸事件，调用Keyboard.dismiss()：

// 假设你的时钟组件是<Clock />，修改为：
<Clock onPress={() => Keyboard.dismiss()} />

如果自定义时钟组件未暴露onPress属性，用TouchableWithoutFeedback包裹它：

import { TouchableWithoutFeedback } from 'react-native';

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
  <Clock />
</TouchableWithoutFeedback>

方案2：全局点击空白区域关闭键盘

给页面最外层容器添加触摸事件，点击任何空白区域或非输入组件时自动收起键盘：

import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';

<TouchableWithoutFeedback 
  onPress={() => Keyboard.dismiss()} 
  accessible={false} // 避免干扰屏幕阅读器功能
>
  <View style={{ flex: 1 }}>
    <CustomInput3
      maxLength={50}
      value={content}
      onChangeTextUpperCase={text => setContent(text)}
      placeholder="Adı"
    />
    <Clock />
    {/* 其他页面元素 */}
  </View>
</TouchableWithoutFeedback>

方案3：检查自定义输入组件的焦点逻辑

如果CustomInput3是封装的TextInput组件，排查内部是否存在异常焦点处理（比如失去焦点时自动重新获取焦点），确保组件能正常响应blur事件，让键盘可正常收起。

内容的提问来源于stack exchange，提问作者Alperen Kapusuz