Comment créer une application mobile avec React-Native

React Native est un framework JavaScript permettant d'écrire des applications mobiles réelles et à rendu natif pour iOS et Android. React Native expose également les interfaces JavaScript pour les API de plate-forme. Ainsi, vos applications React Native peuvent accéder aux fonctionnalités de la plate-forme, telles que la caméra du téléphone ou l'emplacement de l'utilisateur.

Installez React Native:

Je vais écrire les étapes à suivre si quelqu'un d'autre est intéressé à apprendre cela aussi. Nous allons maintenant voir comment installer React Native.

Pour React Native, nous avons besoin d'un noeud, Watchman, CLI et Xcode de React Native. Watchman est un service permettant de surveiller les modifications et de déclencher des actions lorsque cela se produit. CLI réactif est l’interface de commande de React Native. Xcode est Apple IDE.

  1. Installer le noeud et le gardien:

Installer un nœud et un gardien avec Homebrew

brassez le noeud d'installation
brasseur installer gardien

2. Installez CLI natif de React

Cela vous aidera à installer votre React Native. Si React Native est déjà installé sur votre ordinateur, vous pouvez passer directement au didacticiel.

Les instructions sont un peu différentes selon votre système d'exploitation de développement et si vous souhaitez commencer à développer pour iOS ou Android. Si vous souhaitez développer à la fois pour iOS et Android, c'est très bien, vous devez simplement en choisir un pour commencer, car la configuration est un peu différente. depuis que j'ai un macOS, je vais commencer par iOS en tant que système cible.

npm installer -g react-native-cli

3. Installer les outils Xcode et Xcode Command

Installez Xcode à partir du Mac App Store.

Maintenant vous avez fini. Commençons notre première application:

Création du projet natif React:

Exécutez ces commandes dans un terminal:

réactif-natif init AwesomeProject

Ouvrez maintenant le projet avec votre éditeur favori, je vais utiliser VSCode.

Fichiers de projet

appuyez sur ˆ control + `pour changer de terminal dans VScode.

réactif natif run-ios
Première exécution

Structure des dossiers

Une fois l’installation terminée, vous devriez avoir les fichiers suivants:

Pour commencer, je recommanderais de faire un peu de ménage:

  • Ajouter un dossier à la racine appelé app
  • Déplacez le fichier App.js à la racine de l'application
  • Mettez à jour l'instruction d'importation index.js pour importer une application à partir de ./app/App.js
  • Créer des dossiers dans l'application

assets - Nous avons deux dossiers dans ce répertoire, images et animations.

composants - C’est ici que vous placerez tous vos composants partagés.

config - Nous avons configuré le jeu de couleurs de notre application dans un fichier colors.js pour que cela reste cohérent.

écrans - Ce sont nos vues principales.

Des écrans

Dans notre application, nous avons cinq écrans principaux

  • Bibliothèque
  • Explorer
  • Ajouter un livre
  • Listes
  • Profil

Pour commencer, nous allons stub ceux avec un texte de substitution:

La navigation

Une fois que ces cinq écrans sont configurés, nous pouvons créer la première partie de notre navigation, l’onglet de navigation au bas de l’écran. Nous allons utiliser la bibliothèque de navigation React. Nous allons ajouter un fichier router.js à la racine de notre dossier d’application, puis installer quelques bibliothèques:

installer React-Navigation

npm installer react-navigation --save

1. installer les éléments natifs de réaction

fil ajouter réact-native-elements ou npm i --save reacter-native-elements

2. installer les icônes vectorielles natives

fils ajouter des icônes vectorielles de réaction-natif ou npm i --save enregistrer des icônes vectorielles de réaction-natif

réagir-natif lien réagir-natif-vecteur-icônes

Une chose à faire est de changer le fichier App.js

Vous devriez avoir quelque chose qui ressemble à ceci:

Ajout de livres

Maintenant que les os sont en place, la partie amusante commence. Nous allons utiliser un objet de données statique pour créer une liste de livres. Pour l’affichage initial de la bibliothèque, nous n’avons besoin que de quelques points de données: identifiant, titre, auteur et miniature.

Pour cela, nous allons utiliser le composant FlatList de React Native. Ceci est un composant vraiment soigné qui fonctionne immédiatement pour boucler et afficher des données. C’est parce qu’il intègre une multitude de fonctionnalités, telles que tirer pour rafraîchir, charger le défilement, etc.

Dans le fichier Bookcase.js, nous allons ajouter du code ressemblant à ceci:

Bibliothèque.JS

En cela, vous remarquerez que nous devons ajouter un autre fichier: BookcaseItem.js, ce que notre fonction _renderItem rend. Voici à quoi ressemble le fichier:

BookcaseItem.JS

EditBook.JS

Jusqu'à présent, l'application ne fait qu'énumérer des livres. nous voulons pouvoir éditer ces livres. Pour ce faire, nous devons ajouter un événement click lorsque quelqu'un appuie sur un livre. C’est ce pour quoi _onEditBook et .

Dans le fichier router.js, vous trouverez deux createStackNavigator créés. Vous pouvez vous demander ce que fait StackNavigator! vous pouvez imaginer créerBottomTabNavigator comme cinq cartes de poker posées sur une table horizontalement les unes à côté des autres. Lorsque vous ajoutez un createStackNavigator, vous posez essentiellement des cartes sur l'une de ces cinq cartes, ce qui ajoute de la profondeur.

export const BookcaseStack = createStackNavigator ({
Bibliothèque: {
écran: bibliothèque,
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Bibliothèque',
en-tête: null,
}),
},
EditBook: {
écran: EditBook,
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Editer le livre',
en-tête: null,
}),
},
});

Maintenant que nous avons une application simple qui répertorie les livres, nous pouvons cliquer dessus pour voir la page d’édition et revenir à la liste. C’est un motif important à comprendre car c’est le même modèle que nous utilisons pour nos zones de listes d’exploration et de lecture.

Ce n’est que le début, mais nous avons les débuts de la configuration de l’application et nous sommes prêts à vraiment commencer à ajouter des fonctionnalités. Restez à l’écoute et nous continuerons de publier des mises à jour et d’ajouter des aide-mémoire. Encore une fois, lancez-moi si vous avez des suggestions ou des idées. Nous aimerions avoir vos commentaires!

Vous pouvez trouver le code complet ici.