"Réagir.Les enfants.uniquement prévu pour recevoir un seul Réagir élément enfant" erreur lors de la mise <Image> et <TouchableHighlight> dans un <View>

Question

J'ai le texte suivant méthode render dans mon Réagir code Natif:

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

Il me donne un

De réagir.Les enfants.uniquement prévu pour recevoir un seul Réagir élément enfant

erreur. Si je supprime l' TouchableHighlight de la composante, il fonctionne très bien. D'autre part, si je supprime le composant de l'Image, il donne toujours l'erreur. Je ne vois pas pourquoi il en serait de donner à cette erreur, et <View> devrait être en mesure d'avoir plus d'un composant à l'intérieur pour le rendu.
Des idées?

Answer 1

Il semble qu' <TouchableHighlight> doit avoir exactement un enfant. Les docs disent qu'il ne supporte qu'un seul enfant et plus d'un doit être enveloppé dans un <View>, mais pas qu'il doit y avoir au moins (et plus) un enfant. Je voulais juste avoir un simple bouton de couleur avec aucun texte/image, donc je n'estime pas nécessaire d'ajouter un enfant.

Je vais essayer de mettre à jour la documentation pour l'indiquer.

Answer 2

L' <TouchableHighlight> élément est la source de l'erreur. L' <TouchableHighlight> élément doit avoir un élément enfant.

Essayez d'exécuter le code comme ceci:

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

J'ai eu ce même message d'erreur, même quand je n'avais qu'un seul enfant de moins de la TouchableHighlight. Le problème était que j'avais un peu d'autres ont commenté, mais de manière incorrecte. Assurez-vous que vous êtes en commentant de façon appropriée: http://wesbos.com/react-jsx-comments/

Answer 4

juste après l' TouchableWithoutFeedback ou <TouchableHighlight> insérer un <View> de cette façon, vous n'obtiendrez pas cette erreur. pourquoi est-ce que @Pedram réponse ou d'autres réponses explique assez.