Блог

В моем приложении у меня есть ввод текста, я хочу скрыть клавиатуру и терять фокус всякий раз, когда пользователь нажимает в любом месте экрана или закрывает клавиатуру.

Я создал эту функцию для этого:

 interface DismissKeyBoardProps {
  children?: ReactNode
} 

const DismissKeyboard: React.FC<DismissKeyBoardProps> = ({ children }) => (
  <TouchableWithoutFeedback 
  onPress={() => Keyboard.dismiss()}> {children}
  </TouchableWithoutFeedback>
);
  

Я использую приведенный выше метод следующим образом:

 const App: React.FC = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Text> Test </Text>
        <DismissKeyboard>
          <TextInput placeHolder= {"place holder"}/>
        </DismissKeyboard>
      </SafeAreaView>
    </>
  );
}; 
  

Однако, когда я пытаюсь запустить его, я получаю сообщение об ошибке:
React.children.only expected to receive a single React element child.

Я не понимаю, почему я получаю эту ошибку, когда DismissKeyBooard действительно имеет только один дочерний элемент — TextInput .

Редактировать: я попробовал предложенное решение подобным образом, но я продолжаю получать ту же ошибку.

   return (
    <View>
      <SafeAreaView>
        <>
          <DismissKeyboard>
            <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} placeHolder={"hint"}/>
          </DismissKeyboard>
        </>
      </SafeAreaView>
    </View>
  );
  

Попробуйте обернуть своих дочерних <View> элементов, я думаю, это вам поможет.

 const DismissKeyboard: React.FC<DismissKeyBoardProps> = ({ children }) => (
  <TouchableWithoutFeedback 
  onPress={() => Keyboard.dismiss()}> 
   <View>
    {children}
   </View>
  </TouchableWithoutFeedback>
);