在 React Native 中关闭键盘答案

【问题标题】：Dismissing Keyboard in React Native在 React Native 中关闭键盘
【发布时间】：2020-11-25 01:53:32
【问题描述】：

我的应用中有多个组件，我使用键盘获取用户输入。现在我想在用户在文本输入字段之外按下时关闭键盘。

我知道有 TouchableWithoutFeedback 可以在其中包装我的组件，但是对于出现此问题的多个屏幕，最好的方法是什么。

我应该为此创建一个处理 TouchableWithoutFeedback 的 HOC 吗？？

【问题讨论】：

标签： javascript reactjs react-native keyboard touchableopacity

【解决方案1】：

你可以这样做

<KeyboardAvoidingView behavior="padding">
    <ScrollView keyboardShouldPersistTaps="handled">
    // Rest of your code
    </ScrollView
</KeyboardAvoidingView>

【讨论】：

【解决方案2】：

对于像我这样想要在点击 FlatList 时隐藏键盘的人，您必须使用 keyboardShouldPersistTaps 属性，如下所示：

<FlatList
   data
   ...otherProps
   keyboardShouldPersistTaps="always"
/>

【讨论】：

【解决方案3】：

HOC 是 imo 的最佳方法

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

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

【讨论】：

这工作正常，但在我的情况下，问题是 Flatlist 的子组件和 Flatlist 在 TouchableWithoutfeedback 内部时根本不滚动。