提问人：Mahendra Liya 提问时间：7/31/2023 更新时间：8/10/2023 访问量：102
React native：确保事件被冒泡
React native: ensure the event gets bubbled
问：
这一定是微不足道的，但我似乎无法弄清楚。
上下文：我有一个自定义组件，每次用户点击屏幕上的某个位置时，都可以隐藏键盘。
HideKeyboard.tsx
import { TouchableWithoutFeedback, Keyboard, } from 'react-native'
import React from 'react'
export interface HideKeyboardProps {
children: React.ReactNode;
}
export default function HideKeyboard(props: HideKeyboardProps) {
return (
<TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }}>
{props.children}
</TouchableWithoutFeedback>
)
}
这工作正常，但是当用户点击屏幕上的按钮时，就会出现问题。预期的行为是 - 键盘关闭并执行按钮的单击处理程序。
但是，由于控制，初始点击被捕获并用于关闭键盘，因此用户必须再次点击。HideKeyboard
有没有办法解决这个问题？我们可以以某种方式在 onPress 处理程序中执行事件吗？
答：
0赞
Ghulam Farid
8/6/2023
#1
在使用 TouchableWithoutFeedback 时，确保事件冒泡的一种可能方法是使用 prop 而不是 prop。例如，您可以将 HideKeyboard 组件更改为如下所示：onPressOutonPress
export default function HideKeyboard(props: HideKeyboardProps) {
return (
<TouchableWithoutFeedback onPressOut={() => { Keyboard.dismiss(); }}>
{props.children}
</TouchableWithoutFeedback>
)
}
这将在用户松开触摸时关闭键盘，但也允许事件冒泡到按钮的处理程序。onPress
0赞
LickingFilth
8/9/2023
#2
我将更改行为，以便 tap 事件不会被 .用 代替 包装组件，并使用 的属性来检测触摸事件。TouchableWithoutFeedbackViewTouchableWithoutFeedbackonStartShouldSetResponderView
如何修改组件：HideKeyboard
import { View, Keyboard } from 'react-native';
import React from 'react';
export interface HideKeyboardProps {
children: React.ReactNode;
}
export default function HideKeyboard(props: HideKeyboardProps) {
return (
<View
onStartShouldSetResponder={() => {
Keyboard.dismiss();
return false; // Continue propagating the event
}}
>
{props.children}
</View>
);
}
通过从处理程序返回，你告诉 React Native 继续将触摸事件传播到其他视图。falseonStartShouldSetResponder
我认为这为您提供了您正在寻找的行为 - 当用户点击屏幕上的某个位置而不干扰按钮单击时关闭键盘。
0赞
Beom
8/10/2023
#3
请尝试以下操作。
import React from 'react';
import { ScrollView, Keyboard, View } from 'react-native';
export interface HideKeyboardProps {
children: React.ReactNode;
}
export default function HideKeyboard(props: HideKeyboardProps) {
return (
<ScrollView keyboardShouldPersistTaps="handled">
{props.children}
</ScrollView>
)
}
ScrollView 的 keyboardShouldPersistTaps 属性允许单击按钮，即使键盘处于打开状态。
评论