0

我正在尝试制作一个高阶组件，该组件应该用 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 放在 LoginScreen 中，它可以完美地工作，但我不能在我的 HOC 中工作。

4

1 回答 1

0

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>
)
于 2019-10-03T17:08:25.513 回答