Блог

У меня есть следующий метод визуализации в моем машинном коде React:

 render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }
  

Это выдает мне эту ошибку:

React.Children.only ожидается получение одного дочернего элемента React

Если я удалю TouchableHighlight компонент, он будет работать нормально. Если я удалю компонент изображения, он все равно выдаст эту ошибку.

Я не понимаю, почему это выдает мне эту ошибку. <View> внутри него должно быть более одного компонента для рендеринга.

Кажется, что <TouchableHighlight> у него должен быть ровно один дочерний элемент. В документах говорится, что он поддерживает только одного дочернего элемента, и более одного должно быть заключено в a <View> , но не то, что у него должен быть по крайней мере (и большинство) один дочерний элемент. Я просто хотел иметь обычную цветную кнопку без текста / изображения, поэтому я не счел необходимым добавлять дочерний элемент.

Я постараюсь обновить документы, чтобы указать это.

<TouchableHighlight> Элемент является источником ошибки. <TouchableHighlight> Элемент должен иметь дочерний элемент.

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

 render() {
    const {height, width} = Dimensions.get('window');
    return (
        <View style={styles.container}>
            <Image 
                style={{
                    height:height,
                    width:width,
                }}
                source={require('image!foo')}
                resizeMode='cover' 
            />
            <TouchableHighlight style={styles.button}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}
  

Да, действительно, у вас должен быть один дочерний элемент внутри вашего <TouchableHighlight> .

И, если вы не хотите загрязнять свой файл, Views вы можете использовать фрагменты React для достижения того же.

 <TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>
  

или, что еще лучше, есть короткий синтаксис для фрагментов React . Таким образом, приведенный выше код может быть написан следующим образом:

 <TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>
  

У меня была такая же ошибка, даже когда у меня был только один дочерний элемент под TouchableHighlight . Проблема заключалась в том, что я прокомментировал несколько других, но неправильно. Убедитесь, что вы правильно прокомментировали: http://wesbos.com/react-jsx-comments /

сразу после TouchableWithoutFeedback или <TouchableHighlight> вставьте <View> таким образом, вы не получите эту ошибку. почему тогда ответ @Pedram или другие ответы объясняют достаточно.

В моем случае мне просто нужно было поместить элемент на одну строку ниже:

Это выдает ошибку:

 export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}> {props.children}
  </TouchableWithoutFeedback>;
}  

Хотя это не выдает ошибку:

 export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    {props.children}
  </TouchableWithoutFeedback>;
}  

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

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

введите описание изображения здесь

1. <TouchableHighlight> внутри элемента может быть только один дочерний элемент
2. Убедитесь, что вы импортировали изображение

используйте TouchableHighlight из « react-native-gesture-handler вместо « react-native

 import { TouchableHighlight } from 'react-native-gesture-handler';
  

В описании из документации говорится:

Библиотека обработчиков жестов предоставляет реализацию сенсорных компонентов RN, которые основаны на собственных кнопках и не зависят от системы JS responder, используемой RN. Наша реализация touchable использует тот же API и направлена на то, чтобы стать заменой для сенсорных элементов, доступных в React Native .

https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/touchables/

Вы можете установить эту библиотеку из: https://github.com/software-mansion/react-native-gesture-handler

Это может быть из-за неправильного оператора импорта для TouchableWithoutFeedback .

Неверно:
import { TouchableWithoutFeedback } from 'react-native'

Исправить:
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'