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) :
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 // 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
Je me retrouve avec une erreur :
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
J'ai donc vérifié qu'il n'y ait pas de texte sans balise dans mon code.Invariant Violation: Text strings must be rendered within a <Text> component
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.
Partager