web-dev-qa-db-fra.com

React native: impossible d'ajouter un enfant sans YogaNode ou noeud parent

Je viens de commencer à apprendre à réagir natif,

J'ai créé un fichier séparé flexdemo.js et créé le composant ci-dessous:

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexibleViews extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, backgroundColor: "powderblue" }}> </View>
                <View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>
                <View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>
            </View>

        );
    }
}

et le fichier App.js est comme ci-dessous:

import React, { Component } from 'react';
import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View, Image
} from 'react-native';

// import Bananas from './src/banana';
// import LotsOfStyles from './src/styledemo'

import FlexibleViews from './src/flexdemo';

export default class App extends Component {
  render() {
    return (
      // <Bananas name = "Tapan"/>
      <View>
        <FlexibleViews />
      </View>

    );
  }
}

Cela me donne cette erreur:

 enter image description here

Maintenant, si j'essaie d'exécuter le code en ajoutant du code flexdemo.js dans App.js, tout fonctionne correctement.

A changé l'App.js comme ceci:

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

 enter image description here

react-nativereact-native-android
26
TapanHP

Supprimer les commentaires à l'intérieur du composant.

36
Roshan Salian

Je veux donner une réponse plus générale ici, car il peut y avoir plusieurs raisons pour le problème renvoyer le même message d'erreur. Les trois que j'ai vu le plus:

1. Des commentaires pourraient en être la cause. Mais au lieu de supprimer les commentaires make les travaillent:

Dans la partie return()-, les variables doivent être encapsulées dans {} comme {this.state.foo} donc emballer les commentaires fonctionne bien ... 

    return(
        <Text> This works {/* it really does */}</Text>
    );

... tant qu'ils ne sont ni le premier ni le dernier élément de l'instruction return:

    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );

2. Le rendu conditionnel pourrait en être la cause. Si myCheck n’est pas défini ou une chaîne vide cela peut échouer:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );

mais en ajoutant la double négation !! fonctionne: 

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );

3. Espaces blancs (ou en fait des chaînes) dans un composant peut provoquer ceci, s'il ne fait pas partie d'un <Text>-:

Texte dans une vue par exemple: _

    /* This fails */
    return(
      <View>it really does</View>
    );

Mais aussi le minuscule espace entre deux composants:

    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );

Mais fonctionne si dans une nouvelle ligne:

    return(
      <View>
        {/* This works */}
        <Text>surpisingly it does</Text>
      </View>
    );

Malheureusement, ces pièges ne conduisent pas toujours à des erreurs. Parfois ils travaillent. Je suppose que cela dépend de tous les nombreux outils/bibliothèques/composants que vous utilisez et de leurs versions dans votre application. 

31
Pauloco

J'ai pu reproduire le problème avec le code que vous avez fourni. La solution est double:

  1. Dans votre fichier flexdemo.js, vous devez supprimer les espaces blancs des balises <View>. Ils sont considérés comme du texte et le texte n'est autorisé qu'à l'intérieur d'un composant <Text>. Je vous recommande de laisser vos balises <View> auto-fermantes jusqu'à ce qu'elles contiennent du contenu, afin d'éviter ce problème à l'avenir, comme ceci:

    import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexibleViews extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
        <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
        <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
      </View>
    );
  }
}

    Cela rendra vos composants mais restera tout de même défectueux, car vous ne verrez rien à l'écran.

  2. Pour que vos nuances de bleu flexibles apparaissent, vous devez soit ajouter flex au composant <View> de votre fichier App.js, soit (selon vos prochaines étapes, je suppose) le supprimer et rendre votre <FlexibleViews> en tant que composant racine. , car il s’agit en fait d’un composant <View> avec des enfants.

10
Óskar Helgi Adamsson

Si vous avez une instruction if else dans votre fonction render(), utilisez!!comme ceci:

{!! (this.state.your_state) &&
   <View>
        <Text>Your Text</Text>
   </View>
}

au lieu de:

{(this.state.your_state) &&
    <View>
         <Text>Your Text</Text>
    </View>
}
2
S.Hossein Asadollahi

Je rétrograde la version native, puis j'ai eu une erreur différente, essentiellement ce que j'ai eu une chaîne simple dans une vue, quelque chose comme ça:

<View>
    MyComponent
</View>

Je devais envelopper la chaîne avec un composant de texte comme celui-ci:

<View>
    <Text>MyComponent</Text>
</View>

j'espère que cela pourra aider

2
jack.the.ripper

Supprimer le commentaire dans le bloc de retour "//" J'ai rencontré le même problème lorsque j'ai accidentellement ajouté un ';' dans le bloc de retour, l'iOS fonctionne bien, mais Android a cette information de bogue

1
yubinvip

Cette erreur est généralement l'une des erreurs ci-dessous

  • Supprimer les commentaires inutiles et supprimer les commentaires de la fonction de retour.
  • vérifiez le nom de la variable appropriée.
  • vérifier le point-virgule involontaire ou toute syntaxe incorrecte 
1
Rohith M

Supprimer le point-virgule lors du rendu d'une méthode dans 

<View style={styles.container}> {this.renderInitialView()} //semi-color should not be here </View>

0
MOHAMMED BASHEER T

Cette erreur se produit également si vous avez des commentaires dans votre fonction render () return (). Supprimer tous les commentaires dans votre fonction de retour lors du rendu de JSX

0
Nickmccomb

Dans mon cas, ma fonction de rendu comportait une condition qui a conduit à évaluer 0.

Il semble que 0 && '' quelques jsx '' dans les nouvelles versions de react native. 

Exemple d'erreur: 

render(){
   return <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

Bien que cela doive être valide en javascript et fonctionne dans react depuis 0 c'est falsey, il se bloque dans react native, je ne sais pas pourquoi mais ça fonctionne avec un peu de refactoring comme:

Exemple de travail: 

render(){
   return <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}
0
TacoEater

J'ai rencontré le même problème tout à l'heure et je l'ai résolu en supprimant les commentaires que j'avais faits lors de l'édition du projet dans Android studio et, là-bas, le shorotcut du commentaire ajoute simplement/* et */mais en réalité, le code commenté doit être joint avec le début et la fin des accolades, par exemple ce qui suit serait un commentaire invalide:

/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/

Et ce qui suit sera valide:

{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}

vous voyez qu'il y a juste une différence mineure qui consiste à mettre le commentaire entre accolades. 

0
Khan Shahrukh