web-dev-qa-db-fra.com

Impossible d'ajouter un enfant qui n'a pas de YogaNode à un parent sans fonction de mesure! (Essayer d’ajouter un 'ReactRawTextShadowNode' à un

Selon this tutorial, c’est mon composant que j’utilise pour un composant react base en tant que composant de barre latérale, et qui fonctionne très bien, mais le problème commence lorsque je change les éléments de la liste de <Text> à <Button>

    import { Text, Container, Header, Content, List, ListItem, TextBody, Button } from 'native-base';
import { StackNavigator, DrawerNavigator } from 'react-navigation'

export default class SideBar extends Component {

    render() {
        return (
            <Content style={{ backgroundColor: '#ffffff' }}>
                <Container>

                    <Content>
                        <List>
                            <ListItem>
                                <Text>First</Text>
                            </ListItem>
                            <ListItem>
                                <Text>Secount</Text>
                            </ListItem>
                            <ListItem>
                                <Text>Third</Text>
                            </ListItem>
                        </List>
                    </Content>
                </Container>
            </Content>
        );
    }
}

Je reçois cette erreur:

impossible d'ajouter un enfant qui n'a pas de YogaNede à un parent sans le Fonction de mesure! (Ajout d'un 'ReactRawTextshadow' à un 'LayoutShadowNode')

je ne peux pas comprendre cette erreur du tout et je n'ai rien vu à ce sujet sur le net!

> Cannot add a child that doesn't have a YogaNode to a parent without a
> measure function! (Trying to add a 'ReactRawTextShadowNode' to a
> 'LayoutShadowNode') addChildAt
>     ReactShadowNodeImpl.Java:199 addChildAt
>     ReactShadowNodeImpl.Java:54 setChildren
>     UIImplementation.Java:472 setChildren
>     UIManagerModule.Java:436 invoke
>     Method.Java invoke
>     Method.Java:372 invoke
>     JavaMethodWrapper.Java:374 invoke
>     JavaModuleWrapper.Java:162 run
>     NativeRunnable.Java handleCallback
>     Handler.Java:739 dispatchMessage
>     Handler.Java:95 dispatchMessage
>     MessageQueueThreadHandler.Java:31 loop
>     Looper.Java:135 run
>     MessageQueueThreadImpl.Java:194 run
>     Thread.Java:818
javascriptreact-nativenative-base
6
Iman Salehi

Vous devriez utiliser <Text> pour afficher le texte dans <Button> comme ceci 

<ListItem>
    <Button> <Text>First</Text> </Button>
</ListItem>
12
Farsheel

Pour les autres qui arrivent sur cette page en raison du même message d'erreur que l'OP, il existe toute une foule de problèmes susceptibles de provoquer le même message d'erreur.
Il y a un problème de GitHub concernant ce message d'erreur générique.

Les raisons les plus courantes sont probablement: 

  • le texte à restituer n'est pas encapsulé dans les balises <Text> 
  • erreur de syntaxe dans JSX (par exemple, un ; ou une balise mal formée) 

  • un espace entre les commentaires JSX et une balise JSX, si vous utilisez Prettier
    (il semble que Prettier mette une insertion ; automatique,
    (solution: déplacer le commentaire JSX sur sa propre ligne) 

  • une valeur est supposée être null, mais c'est undefined ou un '' (chaîne vide).
    Dans le cas d'un '', il devra être enveloppé dans <Text> (voir 1er élément ci-dessus) 

  • ne pas emballer les balises enfants ( ScrollView en particulier ) 
  • espace entre deux balises adjacentes
  • un problème avec CSS

    Si un noeud CSS a défini une mesure, l'algorithme de mise en page ne visitera pas ses enfants. De plus, il affirme que vous n’ajoutez pas d’enfants aux nœuds dotés de fonctions de mesure.

Je vous recommande vivement de jeter un coup d'œil si vous rencontrez des difficultés pour trouver la source de votre erreur: https://github.com/facebook/react-native/issues/13243

Comme une personne a écrit : 

Résumer:
Ce problème concerne ce qui est perçu par React Native comme un fichier JSX mal formaté (se produisant généralement sur le rendu Android) et ce fil de discussion a bien documenté les nombreuses formes que ce fichier JSX malformé peut contenir. 

Cela ne résout toujours pas la nécessité pour les développeurs de parcourir leur code, ligne par ligne, à la recherche de points-virgules ou d'espaces aléatoires. 

S'il existe un moyen de faire en sorte que la trace de la pile soit plus précise sur le caractère ou l'erreur en cause, cela épargnerait probablement plusieurs heures de débogage.

9
SherylHohman

Mon erreur a été causée par ce code:

      {caption && (
        <Text
          style={[styles.tag, { marginBottom: 8 }]}
          numberOfLines={4}
          ellipsizeMode="tail"
        >
          {caption}
        </Text>
      )}

Pour une raison quelconque, je dois contraindre caption d'une chaîne à une valeur booléenne pour que cela fonctionne sur Android. (Cela a bien fonctionné sur iOS):

     {!!caption && (
        <Text
          style={[styles.tag, { marginBottom: 8 }]}
          numberOfLines={4}
          ellipsizeMode="tail"
        >
          {caption}
        </Text>
      )}

J'espère que ça aide quelqu'un

1
jhm