React native: impossible d'ajouter un enfant sans YogaNode ou nœud parent

Question

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:

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

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

Answer 1

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

Answer 2

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

1. Les commentaires peut-être la cause. Mais au lieu de supprimer des commentaires faire leur travail:

Dans l' return()-partie, les variables doivent être enveloppé dans {} comme {this.state.foo} donc envelopper les commentaires fonctionne très bien...

    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 bien des chaînes de caractères) 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 le petit espace 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>surprisingly 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.

Answer 3

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 à partir de l'intérieur de l' <View> tags. Ils sont considérés comme du texte, et le texte est permis qu'à l'intérieur d'un <Text> de la composante. Je vous recommande de faire votre <View> 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 défectueux, que vous ne voyez rien sur l'écran.

2. Pour obtenir votre flexible nuances de bleu à apparaître, vous devrez ajouter flex à l' <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.

Answer 4

Si vous avez une déclaration 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>
}
 

Answer 5

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 ça t'as aidé