react-native est une librairie qui permet de créer une application mobile Android et IOS native grâce à un seul code compréhensible par tout développeur qui fait du javascript ou mieux react.
Nous allons détailler dans la suite de cet article les différentes étapes pour créer une application react-native avec Android.
Variables d’environnement
On est sur du Ubuntu 20.04 LTS
Dans un premier temps, on ajoute les variables d’environnements utiles à Android qui sont :
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-toolsIl y a deux façons de les ajouter:
- Dans un terminal, lancer les commandes ci-dessus une par une (assez fastidieux)
- Ajouter ces lignes dans le fichier ~/.bash_aliases (c’est ce qu’on va faire)
On édite alors le fichier
nano ~/.bash_aliasesOn ajoute les lignes ci-dessus et on enregistre.
Création de l’application
Dans un dossier, on crée une application grâce à npx
cd /home/web/
npx react-native init mobilenpx: est un package nodejs – disponible depuis la version de 5.2 de npm (juillet 2017). Il permet de faire plusieurs choses.
Dans la commande précédente, npx va à la fois installer react-native et initialiser notre projet.
Retour de la commande
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
Run instructions for iOS:
• cd "/home/web/mobile" && npx react-native run-ios
- or -
• Open mobile/ios/mobile.xcodeproj in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "/home/web/mobile" && npx react-native run-android
Run instructions for Windows and macOS:
• See https://aka.ms/ReactNative for the latest up-to-date instructions.On installe l’application sur notre téléphone ANDROID qu’on a branché sur une prise USB de notre PC. Avant cela, on s’assure d’avoir activé le mode développeur sur notre téléphone. Il faut se référer au modèle du téléphone pour activer ce mode développeur car ce n’est pas toujours la même manipulation.
npx react-native run-androidTout se passe bien jusqu’à l’erreur suivante :
error Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses". Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081On lance Android Studio et on va dans Tools > SDK Manager puis dans l’onglet SDK Tools.
On coche « Google Play Licensing Library » et on clique sur « OK« . On installe la licence.
Une fois l’installation de la licence terminée, on retourne dans le terminal et on relance à nouveau
Il est maintenant temps de lancer « Metro server » . Cela se fait avec la commande :
npx react-native startOn devrait avoir ceci
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
To reload the app press "r"
To open developer menu press "d"On le laisse tourner
On ouvre un autre terminal. On installe l’application sur le téléphone grâce à :
npx react-native run-androidSur notre téléphone, on a bien l’affichage suivant:
qui confirme que notre application est bien fonctionnelle.
Et c’est tout 😉