React Native实现事件冒泡：解决点击按钮时键盘关闭与事件触发问题

你的问题本质是TouchableWithoutFeedback的onPress会消耗触摸事件，导致子组件的点击逻辑被拦截，必须第二次点击才能触发。要实现「点击按钮时同时关闭键盘+执行按钮逻辑」，最简洁的方案是替换掉TouchableWithoutFeedback，用普通View的onTouchEnd事件处理键盘关闭：

修改后的组件代码 #

import { View, Keyboard, StyleSheet } from 'react-native'
import React from 'react'

export interface HideKeyboardProps {
    children: React.ReactNode;
}

export default function HideKeyboard(props: HideKeyboardProps) {
    return (
        <View 
            style={StyleSheet.absoluteFillObject}
            onTouchEnd={() => Keyboard.dismiss()}
        >
            {props.children}
        </View>
    )
}

原理说明 #

View的onTouchEnd事件不会拦截子组件的触摸事件，它会在触摸动作结束时触发（不管子组件有没有自己的点击逻辑）。这样点击按钮时：

1. 按钮自身的onPress逻辑正常执行
2. 父View的onTouchEnd同步触发Keyboard.dismiss()关闭键盘
   完全不需要两次点击，一次操作就能完成两个需求。

如果你的场景需要保留TouchableWithoutFeedback的特性，还可以通过事件传递的方式处理：在子组件的点击函数中主动调用Keyboard.dismiss()，同时在HideKeyboard组件中判断点击目标是否为可交互元素，仅在空白区域触发键盘关闭。但上面的View+onTouchEnd方案是最省心的通用解法。

内容的提问来源于stack exchange，提问作者Mahendra Liya