Dans cette première partie de cette série de didacticiels, nous allons implémenter la carte, ainsi que les en-têtes de configuration et d'en-tête de configuration, qui créeront une base pour l'interface utilisateur générale de l'application. L'idée est de commencer par la mise en œuvre de la vue Carte, puis de la section d'en-tête avec toutes les sections séparées en différentes fonctions.
Alors commençons !!
Dans ce didacticiel, nous allons utiliser EXPO comme dépendance au développement de React pour les projets natifs. Tout d'abord, nous allons créer une application passe-partout avec React Native à l'aide du client expo.
Création du projet React Native par Boilerplate
Tout d'abord, comme nous allons utiliser l'expo comme moteur de développement, nous devons l'installer dans notre système. Pour installer expo globalement sur notre système, vous devez d'abord installer Node Package Manager (NPM). Ensuite, nous devons exécuter la commande suivante:
Nous devons maintenant créer une application native de réaction répétitive à l'aide de expo. Pour ce faire, vous devez exécuter la commande suivante dans le répertoire du projet souhaité:
expo init // nom du projet ==> Recherche de lieu de camping Après pour exécuter avec la commande précédente, il nous sera demandé de choisir le modèle pour l'application répétitive. Ici, nous choisirons le gabarit t ** abs ** qui comporte plusieurs écrans de test et navigations de réaction configurés. La capture d'écran de sélection est fournie ci-dessous:
Comme nous pouvons le constater, nous choisissons le modèle d'onglet et appuyez sur Entrée. Ensuite, nous devons entrer le nom du projet et ensuite, l’application de réaction native est configurée dans notre répertoire.
Nous devons maintenant entrer dans le répertoire du projet, puis exécuter la commande:
Ensuite, l'application répétitive suivante apparaît sur l'écran de notre émulateur:
Configuration des fichiers de navigation
Nous avons déjà configuré les navigateurs dans Notre projet à des fins de navigation. Mais maintenant, nous devons configurer les navigateurs et les fichiers de navigation selon les besoins de notre application.
Ensuite, nous devons d'abord créer un fichier ScreensNavigator.js dans le répertoire / répertoire de navigation de notre projet. Ensuite, nous devons créer un fichier Campings.js et un fichier Settings.js dans le répertoire "/ screens" de notre projet. Maintenant, la structure de notre projet ressemblera à celle montrée dans la capture d'écran suivante:
Nous devons maintenant copier le code de HomeScreen.js et collez-le Campings.js . Encore une fois, nous devons faire la même chose à partir de SettingsScreen.js et Settings.js Écran pour que le projet s'exécute dans l'émulateur sans erreur pour l'instant.
Maintenant dans ScreensNavigator. js, nous devons configurer le navigateur, y compris les écrans Camping et Setting. Pour ce faire, nous devons créer un navigateur de pile à l'aide de la méthode createStackNavigator du paquet react-navigation comme indiqué dans l'extrait de code ci-dessous:
import Réagir & # 39; réagir & # 39; ;
import {createStackNavigator} depuis & # 39; rea-navigation & # 39; ;
import Les campings de & # 39; ../ screens / Campings & # 39; ;
import Configuration depuis & # 39; ../ screens / Configuration & # 39; ;
export default createStackNavigator ({
Campings : Campings,
Configuration : Configuration,
}); Ici, nous avons déjà le fichier AppNavigator.js configuré pour nos fichiers de projet. Cependant, nous devons reconfigurer le fichier AppNavigator.js avec notre nouveau ScreensNavigator. Pour ce faire, nous devons configurer le fichier principal AppNavigator.js comme dans l'extrait de code ci-dessous:
import Réagissez à partir du & # 39; ;
import {createAppContainer, createSwitchNavigator} de & # 39; rea-navigation & # 39; ;
import ScreensNavigator de & # 39; ./ ScreensNavigator & # 39; ;
export default createAppContainer (createSwitchNavigator ({
Principal : ÉcransNavigator,
})); Maintenant, si nous réexécutons le projet dans l'émulateur, nous obtiendrons le même écran qu'auparavant.
Création de la carte dans Camping.js
Premièrement, nous devons supprimer tout le code de Camping.js. Ensuite, nous importerons tous les composants nécessaires de notre package React and Rea-Native indiqué dans l'extrait de code ci-dessous:
import React de & # 39; réagir & # 39; ;
import {
L'image,
Plate-forme,
ScrollView,
Feuille de style,
Le texte,
TouchableOpacity,
Regarder,
} de & # 39; rea-native & # 39; ; Maintenant, nous devons installer le paquet react-native-maps dans notre projet à l'aide de la commande suivante:
expo installe react-native-maps Suivant, Nous devons importer le package réact-native-maps dans notre fichier Camping.js comme suit:
import de la carte de & # 39; react-native-maps & # 39; ; Désormais, pour inclure la carte sur notre écran Camping, nous devons utiliser le composant MapView fourni par react-native-package, comme indiqué dans l'extrait de code ci-dessous:
classe Campsites s'étend à React . Composant {
faire () {
retour (
< Voir style = {styles.container} >
contentContainerStyle={styles.contentContainer}>
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
} Nous avons ici le composant MapView lié à certains styles, ainsi que l'accessoire initialRegion. L'accessoire initialRegion nous permet de définir les paramètres d'emplacement de la carte, comme indiqué dans l'extrait de code ci-dessus. Il existe plusieurs composants de Views et un composant ScrollView qui enveloppe MapView de certains styles pour positionner correctement la carte. Les styles requis sont fournis dans l'extrait de code ci-dessous:
const styles = StyleSheet.create ({
conteneur : {
flex : 1 ,
backgroundColor : & # 39; # fff & # 39;
},
carte : {
flex : 1
},
contentContainer : {
paddingTop : 30 ,
},
}); Par conséquent, nous obtenons le résultat suivant sur notre écran d'émulateur:
Paramètres de style de carte
Pour afficher correctement la carte à l'écran, utilisons les fonctions suivantes: Composant Dimensions fourni par le package react-native. En utilisant le composant Dimensions, nous pouvons obtenir la hauteur et la largeur de tout l'écran de l'application. Ensuite, nous pouvons le configurer avec notre MapView pour afficher la carte correctement à l’écran. Nous importons maintenant les dimensions comme suit:
import {
L'image,
Plate-forme,
ScrollView,
Feuille de style,
Le texte,
TouchableOpacity,
Regarder,
Dimensions
} de & # 39; rea-native & # 39; ; Nous devons maintenant définir les constantes de hauteur et de largeur pour nos dimensions d'écran à l'aide de la méthode get du composant Dimensions:
const {width, height} = Dimensions. get ( & # 39; screen & [399018]); Ensuite, nous devons ajouter les dimensions de hauteur et de largeur du composant MapView pour le configurer correctement à l'écran. Le code permettant de faire cela est fourni dans l'extrait de code ci-dessous:
<MapView style = {{ flex : 1 hauteur : hauteur * 0.5 width}}
initialRegion = {{
latitude : 37.78825 ,
Longueur : -122.4324 ,
latitudeDelta : 0.0922 ,
Delta de longueur : 0.0421 ,
}}
/> Nous obtenons donc le résultat suivant sur notre écran d'émulateur:
Comme nous pouvons le voir, nous avons implémenté avec succès l'affichage de carte dans Notre écran d'application Camping Maintenant, ajoutons un en-tête personnalisé à l'écran d'application Camping.
Implémentation de la section d'en-tête
Dans cette section, nous allons implémenter un en-tête en haut de notre composant MapView. L'en-tête sera composé du nom de l'emplacement du camping avec le bouton de configuration à droite.
Mais d'abord, nous devons supprimer la barre d'en-tête par défaut en haut. Pour ce faire, nous devons ajouter le code suivant dans notre fichier Campings.js:
classe Les camps s'étendent du React . Composant {
static navigationOptions = {
header : null ,
}; Lors de la définition de la valeur de l'en-tête NULL dans les options de navigation fournies par la pile du navigateur, l'en-tête par défaut en haut disparaît. Le résultat est présenté dans la capture d'écran de l'émulateur ci-dessous:
Comme nous pouvons le constater, l'en-tête par défaut a disparu. Maintenant, implémentons notre barre d’en-tête personnalisée.
Création d'un en-tête personnalisé
import {FontAwesome, Ionicons} depuis & # 39; @ expo / vector-icons & # 39; ; Nous importons ici le pack d'icônes FontAwesome et le pack d'icônes Ionicons du pack d'icônes vectorielles fourni par le package expo.
Créons maintenant une fonction appelée renderHeader () qui renvoie le modèle. Le code permettant d'implémenter cette fonction est fourni dans l'extrait de code ci-dessous:
renderHeader () {
retour (
< Voir style = {styles.header} >
Localisation détectée
Iles du Nord ()
)
} Dans l'extrait de code ci-dessus, nous avons ajouté des composants de texte et des icônes entourés par des composants de vue. Ensuite, nous devons appeler la fonction therenderHeader () dans notre fonction render (), comme indiqué dans l'extrait de code ci-dessous:
render () {
retour (
< Voir style = {styles.container} >
contentContainerStyle={styles.contentContainer}>
{this.renderHeader ()} // ici 
Comme nous pouvons le constater, nous avons obtenu la section d'en-tête en haut de notre MapView, mais elle semble très peu attrayante. Par conséquent, nous devons ajouter quelques styles pour le rendre superbe, comme dans l'application Camping Spots Finder.
Ajouter des styles et des paramètres à l'en-tête
Nous allons ici ajouter quelques paramètres de style à la section d'en-tête pour la rendre plus attrayante. Pour ce faire, nous utiliserons de nombreux liens de style. Ici, la propriété flex des styles réactifs est utilisée. Ainsi, nous pouvons également avoir une idée de la façon d'utiliser la propriété flex. Par conséquent, le code pour implémenter cela est fourni dans l'extrait de code ci-dessous:
renderHeader () {
retour (
< Voir style = {styles.header} >
Localisation détectée
Iles du Nord
)
} Dans l'extrait de code ci-dessus, le composant de configuration Icon est encapsulé par le composant TouchableOpacity afin de pouvoir être cliqué dessus. Ensuite, différents liens de style en ligne sont utilisés, ainsi que la feuille de style, pour donner à la section d'en-tête son apparence correcte. Les styles de cette section sont fournis dans l'extrait de code ci-dessous: header
: {
flex : 1 ,
flexDirection : & # 39; row & # 39;
alignItems : & # 39; center & # 39;
justificationContenu : & # 39; centre & # 39;
height : height * 0.15 ,
remplissage horizontal : 14 ,
},
localisation : {
hauteur : 24 ,
largeur : 24 ,
borderRadius : 14 ,
alignItems : & # 39; center & # 39;
justificationContenu : & # 39; centre & # 39;
backgroundColor : & # 39; # FF7657 & # 39;
},
configuration : {
alignItems : & # 39; center & # 39;
justificationContenu : & # 39; centre & # 39;
},
options : {
flex : 1 ,
remplissage horizontal : 14 ,
}, En conséquence, nous obtenons le résultat suivant sur notre écran d'émulateur:
Comme nous pouvons le constater, la section d'en-tête est très cool et attrayante. maintenant avec une icône de flèche de navigation à gauche et une icône de configuration à droite. Il est utilisé pour afficher le nom de l'emplacement détecté dans l'application réelle.
Nous créons ici la section d'en-tête dans la fonction renderHeader () qui renvoie le modèle de la section d'en-tête. Cela rend le code de la méthode render () de notre projet plus clair et plus propre. Implémentons donc MapView, ainsi que d’autres sections que nous implémenterons dans le style de la fonction.
Division des sections de l'interface utilisateur en fonctions
Il ne s'agit que de l'étape intermédiaire dans laquelle nous allons séparer le codage des implémentations de différentes sections de l'interface utilisateur en fonctions afin que la méthode de représentation soit moins renseignée. codes Cela nous aidera à comprendre et à mieux lire le code. La méthode render () sera propre et exempte de toutes les sections de codage mélangées en une seule. Alors faisons ceci.
Déplaçons d'abord le code de MapView vers la fonction renderMap (), comme indiqué dans l'extrait de code ci-dessous:
renderMap () {
retour (
< Voir style = {styles.map} >
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
)
} La méthode renderMap () renvoie maintenant le modèle de composant MapView.
Ensuite, nous allons implémenter la section List située sous le composant map dans le prochain tutoriel. Mais commençons par créer une fonction séparée appelée renderList () pour cette section, qui retourne le modèle pour la section liste. La fonction est fournie dans l'extrait de code ci-dessous:
renderList () {
retour (
< Voir >
Liste des campeurs ici
</ Voir >
)
} Ici, je viens d'ajouter un élément de texte au composant vue que nous allons configurer dans la prochaine partie de ce didacticiel.
Maintenant, nous devons appeler ces fonctions dans la méthode render () de notre projet, comme indiqué dans l'extrait de code ci-dessous:
render () {
retour (
< Voir style = {styles.container} >
contentContainerStyle={styles.contentContainer}>
{this.renderHeader ()} // pour la section d'en-tête
{this.renderMap ()} // pour la section MapView
{this.renderList ()} // pour la section List
</ Vista >
);
} Nous obtiendrons donc le résultat suivant sur notre écran d'émulateur:
Comme nous pouvons le voir, les trois sections sont correctement affichées à l'écran.
Mais nous n'avons pas encore terminé cette partie du didacticiel. Nous allons ajouter une section supplémentaire, à savoir une section d’onglet située entre la section d’en-tête et la section MapView.
Implémentation de la section d'onglets
Dans cette étape, nous allons ajouter les boutons d'onglets à notre section d'en-tête, comme vous pouvez le constater dans l'application originale Campings Spot Finder. Pour cela, nous allons créer une autre fonction qui renvoie le modèle pour la section des onglets. La fonction s'appelle renderTabs () et son implémentation est fournie dans le fragment de code ci-dessous:
renderTabs () {
retour (
< Afficher >
Tous les lieux
Tente
Camping camping-car
</ Afficher >
)
} Nous ajoutons ici quelques éléments de texte encapsulés par le composant View. Nous devons ensuite appeler la fonction renderTabs () de notre fonction render () également:
render () {
retour (
< Voir style = {styles.container} >
contentContainerStyle={styles.contentContainer}>
{this.renderHeader ()} // pour la section d'en-tête
{this.renderTabs ()} // pour la section des onglets
{this.renderMap ()} // pour la section MapView
{this.renderList ()} // pour la section List
</ Vista >
);
} Nous obtenons donc le résultat suivant sur notre écran d'émulateur:
Comme nous pouvons le voir, il existe une section entre l'en-tête et la section MapView mais cela ne ressemble pas à des tabulations Pour que cela ressemble à un onglet, nous devons ajouter des styles et des paramètres.
Ajout de styles et de paramètres à la section d'onglets
Nous allons ici ajouter les paramètres de style à la section d'onglets pour lui donner l'apparence de cils. Pour cela, nous devons utiliser différents liens de style, y compris les propriétés de pliage. remplissages et propriétés de la police. Le code à implémenter est fourni dans l'extrait de code ci-dessous:
renderTabs () {
retour (
< Voir style = {styles.tabs} >
Tous les points
Tentes
Camping car
</ Voir >
)
} Nous avons donc des onglets plus attrayants qu'auparavant, comme le montre la capture d'écran de l'émulateur ci-dessous:
nous pouvons voir, nous avons les onglets entre l'en-tête et les sections de la carte. Nous devons maintenant ajouter un style de tabulation actif, ainsi qu’une configuration permettant de gérer le style actif des onglets.
Configuration des onglets actifs
Nous allons ajouter ici l'implémentation de codage pour déterminer l'onglet actif. Tout d'abord, nous avons besoin d'un état appelé actif pour gérer les propriétés du style d'onglet actif, comme indiqué dans l'extrait de code: suite:
state = {
actif : & # 39; tous & # 39;
} Nous devons maintenant créer une fonction qui gère les modifications et le statut et définit le style actif sur le bon onglet lorsque vous cliquez sur. Pour cela, nous allons créer une fonction appelée handleTab () qui prend une valeur de tabulation en tant que paramètre et définit l'état actif sur la valeur de tabulation lorsqu'elle est activée. L'implémentation de codage de la fonction est fournie dans l'extrait de code ci-dessous:
handleTab = ( tabKey ) => {
this .setState ({ active : tabKey});
} Nous devons maintenant définir quelques styles pour l'onglet actif. Ensuite, ces paramètres de style doivent être liés au texte et à la vue dans notre modèle de section d’onglet dans la fonction renderTabs (). Les styles requis pour l'onglet actif sont fournis dans l'extrait de code ci-dessous:
activeTab: {
borderBottomColor : & # 39; n ° FF7657 & # 39;
},
activeTabTitle : {
couleur : & # 39; # FF7657 & # 39;
}, Les styles donnés ci-dessus donneront la couleur du texte de l'onglet actif, ainsi que le composant View qui entoure un onglet active une bordure en bas.
Nous devons maintenant inclure ces styles et la fonction renderTabs () dont la valeur dépend de l'état actif de l'onglet. Ensuite, nous devons également associer la fonction handleTab () à l'événement onPress du composant Text de l'onglet. L'appel de fonction doit également définir le paramètre de fonction en fonction de l'onglet actif sélectionné. Le code pour implémenter tout cela est fourni dans l'extrait de code ci-dessous:
renderTabs () {
const {actif} = ce .state
retour (
< Voir style = {styles.tabs} >
onPress={() => this.handleTab (& # 39; Toutes & # 39;}}>
Tous les points
onPress={() => this.handleTab (& store & store & # 39;)}>
Tente
Camping en camping-car
</ Voir >
)} Nous obtiendrons donc le résultat suivant sur notre écran d'émulateur:
Enfin, nous avons implémenté avec succès la section d'en-tête, la section d'onglets d'en-tête et une section MapView dans cette partie de notre série de didacticiels de clonage de l'application Camping Spots Finder.
Conclusion
Voici la première partie de notre série de didacticiels permettant de cloner l'interface utilisateur de l'application Camping Spots Finder. Dans la partie didacticiel, nous avons d’abord appris à configurer un projet d’application native pour qu’il réagisse de manière répétitive à l’aide de expo. Ensuite, nous avons appris à configurer les navigateurs et les écrans pour préparer l’interface utilisateur de l’application. Après cela, nous avons obtenu un guide étape par étape sur la mise en œuvre de MapView à l'aide d'un package react-native-maps, d'une section d'en-tête avec des icônes et d'une section d'onglets d'en-tête avec un style de tabulation actif. Nous avons également obtenu des instructions supplémentaires sur la séparation des sections de l'interface utilisateur en différentes fonctions renvoyées par un modèle pour nettoyer le code. Cette première partie de la série de didacticiels est un peu longue, mais nous devons en savoir plus et également configurer l'interface utilisateur de base pour les futures parties, ce qui facilitera la compréhension et la mise en œuvre de la série.
Dans la partie suivante, nous allons implémenter la section de la liste que nous avons séparée dans une fonction précédemment dans ce didacticiel, ainsi que configurer la navigation vers l'écran de configuration.
Alors restez à l'écoute, amis!
Divulgation
Cette publication contient des liens affiliés; Je peux recevoir une compensation si j'achète des produits ou services
à partir des différents liens fournis dans cet article.
[ad_2]