„React.Children.only spodziewa się otrzymać pojedynczy element potomny React” błąd podczas umieszczania <Image> i <TouchableHighlight> w <View>

Mam następującą metodę renderowania w moim kodzie 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>
    );
  }

Daje mi

React.Children.only oczekuje, że otrzyma pojedynczy element potomny React

błąd. Jeśli usunę TouchableHighlightkomponent, działa dobrze. Z drugiej strony, jeśli usunę komponent Image, nadal wyświetla ten błąd. Nie rozumiem, dlaczego miałby powodować ten błąd i <View>powinien być w stanie mieć w sobie więcej niż jeden komponent do renderowania.
Jakieś pomysły?

Wydaje się, że <TouchableHighlight>musi mieć dokładnie jedno dziecko. Dokumenty mówią, że obsługuje tylko jedno dziecko i więcej niż jedno musi być zapakowane w <View>, ale nie, że musi mieć co najmniej (i większość) jedno dziecko. Chciałem tylko mieć jednokolorowy przycisk bez tekstu / obrazu, więc nie uważałem za konieczne, aby dodać dziecko.

Spróbuję zaktualizować dokumenty, aby to wskazać.

<TouchableHighlight>Elementem jest źródłem błędu. <TouchableHighlight>Elementem musi mieć element podrzędny .

Spróbuj uruchomić kod w ten sposób:

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

Tak, rzeczywiście musisz mieć w sobie jedno dziecko <TouchableHighlight>.

A jeśli nie chcesz zanieczyszczać swojego pliku Views, możesz użyć fragmentów reakcji, aby osiągnąć to samo.

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

lub nawet lepiej, istnieje krótka składnia dla React Fragments. Zatem powyższy kod można zapisać jak poniżej:

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

Miałem ten sam błąd, nawet gdy miałem tylko jedno dziecko pod TouchableHighlight. Problem polegał na tym, że kilka innych osób zostało skomentowanych, ale niepoprawnie. Upewnij się, że odpowiednio komentujesz: http://wesbos.com/react-jsx-comments/

zaraz po TouchableWithoutFeedbacklub <TouchableHighlight>wstaw w <View>ten sposób, nie otrzymasz tego błędu. dlaczego tak jest, więc odpowiedź @Pedram lub inne odpowiedzi wystarczająco wyjaśniają.

Zwykle dzieje się to w TochableHighlight. W każdym razie błąd oznacza, że musisz użyć pojedynczego elementu wewnątrz dowolnego komponentu.

Rozwiązanie: Możesz użyć pojedynczego widoku wewnątrz rodzica i wszystko może być użyte w tym widoku. Zobacz załączone zdjęcie

wprowadź opis obrazu tutaj

1. <TouchableHighlight> element może mieć tylko jedno dziecko w środku
2. Upewnij się, że zaimportowałeś Image

W moim przypadku musiałem po prostu odłożyć element o jedną linię w dół:

To generuje błąd:

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

Chociaż nie powoduje to błędu:

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