błąd podczas zakładania <Image> i <TouchableHighlight> w <View>

Question

Mam następujące metody w moim renderowania kodu 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

spodziewać React.Children.only otrzymać pojedynczą reagować element podrzędny

błąd. Jeśli usunę komponent TouchableHighlight, działa poprawnie. Z drugiej strony, jeśli usunę komponent Obraz, nadal będzie ten błąd. Nie widzę powodu, dla którego byłby to błąd, i <View> powinien mieć więcej niż jeden składnik do renderowania.
Jakieś pomysły?

Answer 1

Wygląda na to, że <TouchableHighlight> musi mieć dokładnie jedno dziecko. Dokumenty mówią, że obsługuje tylko jedno dziecko i więcej niż jeden musi być owinięty w <View>, ale nie musi mieć co najmniej (i większość) jednego dziecka. Chciałem tylko mieć zwykły kolorowy przycisk bez tekstu/obrazu, więc nie uznałem za konieczne dodać dziecka.

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

Answer 2

Element <TouchableHighlight> jest źródłem błędu. Element <TouchableHighlight> Element <TouchableHighlight> Element <TouchableHighlight> Element must have a child element.

Spróbuj uruchomić kod tak:

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

}

Answer 3

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