Помилка "React.Children.only очікує отримання одного дочірнього елемента 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.only очікує отримання одного дочірнього елемента React

помилка. Якщо я видалю TouchableHighlightкомпонент, він працює нормально. З іншого боку, якщо я видалю компонент Image, він все одно видає цю помилку. Я не можу зрозуміти, чому це спричиняє цю помилку, і <View>повинен мати в собі більше одного компонента для візуалізації.
Будь-які ідеї?

Здається, <TouchableHighlight>повинна бути рівно одна дитина. У документації сказано, що він підтримує лише одну дитину, і більше однієї має бути загорнутою в <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 чи інші відповіді пояснює досить.

1. <TouchableHighlight> елемент може мати лише одну дитину всередині
2. Переконайтеся, що ви імпортували зображення

Зазвичай це трапляється в TochableHighlight. У будь-якому випадку помилка означає, що ви повинні використовувати один елемент всередині будь-якого компонента.

Рішення: Ви можете використовувати єдиний вигляд всередині батьків, і все, що може використовуватися всередині цього подання . Дивіться додане зображення

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

У моєму випадку мені просто довелося поставити елемент на один рядок:

Це видає помилку:

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