React native: Impossible d'ajouter un enfant qui n'a pas de YogaNode ou de noeud parent

Juste commencé à apprendre à réagir indigènes,

J'ai créé un fichier séparé flexdemo.js et créé composant comme 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 App.js fichier 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>

    );
  }
}

Que me donne cette erreur:

React native: Impossible d'ajouter un enfant qui n'a pas de YogaNode ou de noeud parent

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

Changé Le 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>
    );
  }
}

React native: Impossible d'ajouter un enfant qui n'a pas de YogaNode ou de noeud parent

source d'informationauteur TapanHP

react-native react-native-android

28

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

Je veux donner un cadre plus général de réponse ici, car il peut y avoir plusieurs raisons pour la question retour le même message d'erreur. Les trois j'ai vu les plus:

1. Commentaires peut-être la cause. Mais au lieu de supprimer les commentaires que les
leur travail:
```
In the `return()`-part, variables need to be wrapped in {} like
`{this.state.foo}` so wrapping the comments works fine... 

    return(
        <Text> This works {/* it really does */}</Text>
    );
```
...tant qu'ils ne sont pas le premier ou le dernier élément de l'instruction de retour:
```
    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );
```
2. Rendu conditionnel peut-être la cause. Si myCheck est pas défini ou
une chaîne vide cela peut échouer:
```
    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );
```
mais l'ajout de double négation !! œuvres:
```
    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );
```
3. Des espaces (ou en fait toutes les chaînes) dans un composant peut provoquer
cela, si ce n'est dans un <Text>-Composant:

Texte en Vue par exemple:
```
    /* This fails */
    return(
      <View>it really does</View>
    );
```
Mais aussi l'espace minuscule entre deux composants:
```
    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );
```
Mais fonctionne si dans un retour à la ligne:
```
    return(
      <View>
        {/* This works */}
        <Text>surpisingly it does</Text>
      </View>
    );
```
Malheureusement, ces pièges ne sont pas toujours conduire à des erreurs. Parfois, ils travaillent. Je suppose que cela dépend de tous les nombreux outils/lybraries/composants que vous utilisez et leurs versions de votre application.
10

J'ai été en mesure de reproduire le problème avec le code que vous avez fournis. La solution est double:
1. Dans votre flexdemo.js fichier, vous devez supprimer les espaces de l'intérieur de la <View> balises. Ils sont considérés comme du texte, et le texte est permis qu'à l'intérieur d'un <Text> composant. Je vous recommande de faire votre <View> les balises de fermeture automatique jusqu'à ce qu'ils ont une partie du contenu, à rester à l'écart de cette question dans l'avenir, comme suit:
```
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 encore être défectueux, vous ne voyez rien sur l'écran.
2. Pour obtenir votre flexible nuances de bleu à apparaître, vous devrez ajouter flex pour la <View> composant dans votre App.js fichier ou(en fonction de ce que sont vos prochaines étapes, je suppose) de la supprimer et de rendre votre <FlexibleViews> que le composant racine, car il est fondamentalement un <View> composant avec des enfants de toute façon.
2

Je downgrade réagir version native, puis j'ai eu une autre erreur, en gros ce que c'était, j'ai eu une simple chaîne de caractères dans une vue, quelque chose comme ceci:
```
<View>
    MyComponent
</View>
```
J'ai dû enroulez la corde avec un composant de texte comme ceci:
```
<View>
    <Text>MyComponent</Text>
</View>
```
espère que ça aide

Si vous avez if else déclaration dans votre render() fonction de l'utilisation !! 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>
}

1

Cette erreur est généralement de l'un des ci-dessous erreurs
- Supprimer les commentaires inutiles et de supprimer les commentaires de retour de la fonction.
- de vérifier le bon nom de variable.
- vérifier involontaire point-virgule ou toute erreur de syntaxe
1

Supprimer le commentaire dans le retour de bloquer les "//"
J'ai rencontré le même problème quand j'ai accidentellement ajouter un ';' dans le retour de bloc, l'iOS fonctionne bien, mais Android a ce bug de l'information
0

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

J'ai rencontré le même problème tout à l'heure et résolu en supprimant les commentaires que j'ai faits lors de l'édition du projet dans android studio et plus il y a le commentaire de shorotcut ajoute simplement /* et */, mais en fait pour réagir natif le code commenté, doit être joint à de démarrage et de fin des accolades, par exemple suite à la serait pas valide commentaire:
```
/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/
```
Et la suivante est valide:
```
{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}
```
vous voir il y a juste une petite différence de enfermant les commentaires dans des accolades.

Vous devez vous connecter pour publier un commentaire.