Ошибка «React.Children. Ожидается получение только одного дочернего элемента React» при помещении <Image> и <TouchableHighlight> в <View>

В моем коде React Native есть следующий метод рендеринга:

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. Ожидается получение только одного дочернего элемента 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 Fragments для достижения того же.

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

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

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

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

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

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

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

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

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

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

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

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>;
}