使用 TouchableWithoutFeedback 关闭键盘 - HighOrderComponent

Question

我正在尝试制作一个高阶组件，该组件应该使用 TouchableWithoutFeedback 包装一个组件，以便在用户按下键盘外部时隐藏键盘。

我的高阶组件如下所示：

const DismissKeyboardHOC = Comp => {
  return props => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props} />
    </TouchableWithoutFeedback>
  );
};
export default DismissKeyboardHOC;

在我的 LoginScreen 中，我用我的 HOC 包装了它：

export default DismissKeyboardHOC(LoginScreen);

我面临的潜在问题是，当我查看检查器时，TouchableWithoutFeedback 最终环绕我的 LoginScreen 而不是环绕 SafeAreaView（它应该在的位置）。

我已经尝试手动将 TouchableWithoutFeedback 放入登录屏幕并且它可以正常工作，但我在我的 HOC 中不起作用。

Answer 1

1) 将 TouchableWithoutFeedback 的子项更改为：

  <Comp style={{flex: 1}} {...props}>
    {children}
  </Comp>

2) 将导出更改为：

export const DismissKeyboard = DismissKeyboardHOC(View);

注意：像这样从 React Native 导入视图：

import {view} from 'react-native'

3) 使用 DismissKeyboard 将您的视图包装在 LoginScreen 组件中，如下所示：

return(
<DismissKeyboard>
// All the children
</DissmissKeyboard>
)

使用 TouchableWithoutFeedback 关闭键盘 - HighOrderComponent

Dismiss keyboard with TouchableWithoutFeedback - HighOrderComponent

javascript

react-native

high-order-component