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

Version imprimable

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:

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:

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 :

Citation:

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.

19/08/2021, 14h44
hmscompagnie
L'erreur vient du fait que dans le render block les commentaires doivent s'écrire

Code:

{/* A JSX comment */}

ou
Code:

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
20/08/2021, 08h39
gwyohm

Hello,

React navigation permet de gérer ce que tu veux, notamment avec tabs
https://reactnavigation.org/docs/tab-based-navigation

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

Citation:

undefined is not an object (evaluation '_this.props.navigation.navigate')

Ce qui se confirme quand je regarde les logs.
J'ai :

Code:

Object {}

Au lieu de quelque chose comme :

Code:

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:

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:

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:

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 ?

tu peux passer navigation en props de Window2 ?

Code:

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>
    )
  }
}

20/08/2021, 11h05
hmscompagnie

Ca marche.
Merci beaucoup !