Discussion :

[hmscompagnie]

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.

[hmscompagnie]

L'erreur vient du fait que dans le render block les commentaires doivent s'écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{/* A JSX comment */}

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

[gwyohm]

Hello,

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

[hmscompagnie]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Object {}

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 ?

[gwyohm]

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

[hmscompagnie]

Ca marche.
Merci beaucoup !