Уволить клавиатуру с 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 в LoginScreen, и он работает безупречно, но я не работаю в моем HOC.

Answer 1

1) измените дочерний элемент TouchableWithoutFeedback на:

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

2) измените свой экспорт на:

export const DismissKeyboard = DismissKeyboardHOC(View);

ПРИМЕЧАНИЕ. Импортируйте представление из реагирующего натива следующим образом:

import {view} from 'react-native'

3) оберните ваши взгляды в компоненте LoginScreen с помощью DismissKeyboard следующим образом:

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