IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Créer une barre de navigation - Erreur : Text strings must be rendered within a <Text> component


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : août 2021
    Messages : 16
    Points : 12
    Points
    12
    Par défaut Créer une barre de navigation - Erreur : Text strings must be rendered within a <Text> component
    Bonjour,

    Je travaille sur une appli en reactNative. Je voudrais insérer une barre de navigation personnalisée en bas de l'écran. Avec des icônes : accueil, paramètres, historique...

    Déjà, j'ai cherché si ça existe en prêt à l'emploi. Je n'en ai pas trouvée. Connaissez-vous quelque chose de ce genre ?

    J'ai donc créer un component Footpage.js (avec juste une ligne de texte pour tester) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // Components/Footpage.js
     
    import React from 'react'
    import { StyleSheet, View, Text} from 'react-native'
     
    class Footpage extends React.Component {
      render() {
        return (
          <View style={styles.main_container}>
     
            <Text style={styles.text}>
              Ceci est un pied de page
            </Text>
     
          </View>
        )
      }
    }
     
    const styles = StyleSheet.create({
      main_container: {
        flex: 1
      },
      text: {
          marginLeft: 5,
          marginRight: 5,
          height: 50,
          borderColor: '#000000',
          //borderWidth: 1,
          paddingLeft: 5
        }
    })
     
    export default Footpage
    Ensuite j'ai appelé ce conponent dans une page (un autre component) Window1.js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    // Components/Window1.js
    import React from 'react'
    import { StyleSheet, View, Text, Button} from 'react-native'
    import Footpage from './Footpage'
     
    class Window1 extends React.Component {
      render() {
            return (
                <View style={styles.main_container}>
                    <View style={styles.main_container}>
                      <Text style={styles.text}>Vous êtes sur la fenêtre n°1</Text>
                      <Button title='Aller à la fenêtre n°2' onPress={() => {this.props.navigation.navigate("Window2")}}/>
                    </View>
     
                    <View style={styles.main_container}>
                      <Footpage/>
                    </View>
                </View>
                  )
        }
    }
     
    _displayDetailForFilm = (idFilm) => {
        console.log("Display film with id " + idFilm)
      }
     
    const styles = StyleSheet.create ({
      main_container: {
        flex: 1
      },
      text: {
          marginLeft: 5,
          marginRight: 5,
          height: 50,
          borderColor: '#000000',
          //borderWidth: 1,
          paddingLeft: 5
        }
    })
     
    export default Window1
    Je me retrouve avec une erreur :
    Invariant Violation: Text strings must be rendered within a <Text> component
    J'ai donc vérifié qu'il n'y ait pas de texte sans balise dans mon code.
    J'ai tenté de remplacer le texte "Ceci est un pied de page" par une image, et aussi de ne pas mettre le footpage dans une view, sans résultat.

    Déjà, est-ce que mon raisonnement est bon ? C'est comme ça qu'il faudrait procéder ?
    Ensuite comment résoudre cette erreur ?

    Par avance merci.

  2. #2
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : août 2021
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    L'erreur vient du fait que dans le render block les commentaires doivent s'écrire
    ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
                {/* or it can be
                  Multiline
                  comment
               */}
    Sans ça, le commentaire est reconnu comme un texte hors balise.
    Source :
    https://aboutreact.com/react-native-comments/

    Je suis toujours intéressé de savoir si vous connaissez des barres de navigation prêt à l'emploi

  3. #3
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    Hello,

    React navigation permet de gérer ce que tu veux, notamment avec tabs
    https://reactnavigation.org/docs/tab-based-navigation
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  4. #4
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : août 2021
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    Merci, je vais me pencher sur ça.

    J'ai un autre soucis :
    Quand je passe un component contenant un lien de navigation (valide) dans un autre component, je n'arrive plus à accéder aux props de navigation (désolé si je me trompe dans le langage technique).

    Exemple j'ai 3 components : Window1, Window2 etWindow3

    Window1 contient un bouton qui pointe vers Window2, et Window2 vers Window3.
    Ca ça fonctione.
    J'insère Window2 dans Window1. Et quand je clique sur le bouton de Window2 pointant vers Window3, j'ai une erreur
    undefined is not an object (evaluation '_this.props.navigation.navigate')
    Ce qui se confirme quand je regarde les logs.
    J'ai :
    Au lieu de quelque chose comme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    Object {
      "navigation": Object {
        "actions": Object {
          "dismiss": [Function dismiss],
          "goBack": [Function goBack],
          "navigate": [Function navigate],
          "pop": [Function pop],
          "popToTop": [Function popToTop],
          "push": [Function push],
          "replace": [Function replace],
          "reset": [Function reset],
          "setParams": [Function setParams],
        },
        "addListener": [Function addListener],
        "dangerouslyGetParent": [Function anonymous],
        "dismiss": [Function anonymous],
        "dispatch": [Function anonymous],
        "emit": [Function emit],
        "getChildNavigation": [Function getChildNavigation],
        "getParam": [Function anonymous],
        "getScreenProps": [Function anonymous],
        "goBack": [Function anonymous],
        "isFirstRouteInParent": [Function isFirstRouteInParent],
        "isFocused": [Function isFocused],
        "navigate": [Function anonymous],
        "pop": [Function anonymous],
        "popToTop": [Function anonymous],
        "push": [Function anonymous],
        "replace": [Function anonymous],
        "reset": [Function anonymous],
        "router": undefined,
        "setParams": [Function anonymous],
        "state": Object {
          "key": "id-1629443918756-8",
          "routeName": "Window1",
        },
      }
    Mon fichier de navigation :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // Navigation/Navigation.js
     
    import {createAppContainer} from 'react-navigation'
    import {createStackNavigator} from 'react-navigation-stack'
    import Window1 from '../Components/Window1'
    import Window2 from '../Components/Window2'
    import Window3 from '../Components/Window3'
     
    const WindowStackNavigator = createStackNavigator({
      Window1: { // Ici j'ai appelé la vue "Search" mais on peut mettre ce que l'on veut. C'est le nom qu'on utilisera pour appeler cette vue
        screen: Window1,
        navigationOptions: {
          title: 'Fenêtre 1'
        }
      },
      Window2: { // Encore une fois j'ai mis le même nom que celui du component mais libre à vous de choisir un nom différent
        screen: Window2,
        navigationOptions: {
          title: 'Fenêtre 2'
        }
      },
      Window3: { // Encore une fois j'ai mis le même nom que celui du component mais libre à vous de choisir un nom différent
        screen: Window3,
        navigationOptions: {
          title: 'Fenêtre 3'
        }
      }
    })
     
    export default createAppContainer(WindowStackNavigator)
    Window1 contient :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    // Components/Window1.js
    import React from 'react'
    import { StyleSheet, View, Text, Button, Image, TouchableOpacity } from 'react-native'
    import Footpage from './Footpage2'
    import ampere from '../img/ampere.png'
    import Window2 from './Window2'
     
    class Window1 extends React.Component {
      render() {
            return (
                <View style={styles.container}>
                    <View style={styles.main_container}>
                      <Text style={styles.text}>Vous êtes sur la fenêtre n°1</Text>
                      <Button title='Aller à la fenêtre n°2' onPress={() => {this.props.navigation.navigate("Window2")}}/>
                    </View>
                    <View style={styles.main_container}>
                        <Window2/>
                    </View>
     
                </View>
                  )
        }
    }
     
     
    const styles = StyleSheet.create ({
      main_container: {
        flex: 9
      },
      footpage: {
        flex: 1
      },
      container: {
        flex: 1
      },
      text: {
          marginLeft: 5,
          marginRight: 5,
          height: 50,
          borderColor: '#000000',
          //borderWidth: 1,
          paddingLeft: 5
        },
        image: {
          width: 120,
          height: 180,
          margin: 5,
          backgroundColor: 'gray'
        }
    })
     
    export default Window1
    Et Window2 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // Components/Window2.js
    import React from 'react'
    import { StyleSheet, View, Text, Button } from 'react-native'
    import Footpage from './Footpage2'
     
    class Window2 extends React.Component {
      render() {
            return (
              <View style={styles.container}>
                    <View style={styles.main_container}>
                      <Text style={styles.text}>Vous êtes sur la fenêtre n°2</Text>
                      <Button title='Aller à la fenêtre n°3' onPress={() => {this.props.navigation.navigate("Window3")}}/>
                    </View>
                    <View style={styles.footpage}>
                      <Footpage/>
                    </View>
     
              </View>
                  )
        }
    }
     
    const styles = StyleSheet.create ({
      main_container: {
        flex: 9
      },
      text: {
          marginLeft: 5,
          marginRight: 5,
          height: 50,
          borderColor: '#000000',
          //borderWidth: 1,
          paddingLeft: 5
        },
        footpage: {
          flex: 1
        },
        container: {
          flex: 1
        }
    })
     
     
    export default Window2
    Des idées ?

  5. #5
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    tu peux passer navigation en props de Window2 ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    class Window1 extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.main_container}>
              <Text style={styles.text}>Vous êtes sur la fenêtre n°1</Text>
              <Button title='Aller à la fenêtre n°2' onPress={() => {this.props.navigation.navigate("Window2")}}/>
            </View>
            <View style={styles.main_container}>
              <Window2 navigation={this.props.navigation}/>
            </View>
          </View>
        )
      }
    }
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  6. #6
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : août 2021
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    Ca marche.
    Merci beaucoup !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Créer une barre de navigation horizontale dans une page web
    Par sophieetfrederic dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 25/11/2011, 17h16
  2. Créer une barre de défilement
    Par damleg dans le forum Windows
    Réponses: 4
    Dernier message: 10/05/2006, 15h16
  3. Quel classe pour créer une barre en bas d'une JFrame
    Par daninho dans le forum Agents de placement/Fenêtres
    Réponses: 4
    Dernier message: 01/02/2006, 09h30
  4. créer une barre de navigation déroulante aide
    Par max45 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 28/11/2005, 20h57
  5. Créer une barre de progression sous Vba ??
    Par Deejoh dans le forum Général VBA
    Réponses: 7
    Dernier message: 17/10/2005, 15h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo