"React.Children.only ожидал получить одну ошибку дочернего элемента React" при размещении <Image> и <TouchableHighlight> в <View>

У меня есть следующий метод рендеринга в моем исходном коде 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, он отлично работает. С другой стороны, если я удалю компонент Image, он все равно даст эту ошибку. Я не могу понять, почему он будет давать эту ошибку, а <View> должен иметь более одного компонента внутри него для рендеринга.
Любые идеи?

Ответ 1

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

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

Ответ 2

Элемент <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>
    );
}

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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