react-native Tutoriel
Démarrer avec rea-native

Remarques

Configuration pour Mac

Installation gestionnaire de paquets Homebrew brew

Collez-le à l'invite du terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installation de l'IDE Xcode

Téléchargez-le en utilisant le lien ci-dessous ou trouvez-le sur le Mac App Store

https://developer.apple.com/download/

REMARQUE: Si Xcode-beta.app est installé avec la version de production de Xcode.app , assurez-vous d'utiliser la version de production de l'outil xcodebuild . Vous pouvez le configurer avec:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Installation de l'environnement Android

• git git

  * Si vous avez installé XCode, Git est déjà installé, sinon exécutez la commande suivante

  brew install git 
  

• Dernier JDK

• Studio Android

  Choisissez une installation personnalisée

  

  Choisissez Performance et Android Virtual Device

  

  Après l'installation, choisissez Configurer -> SDK Manager dans la fenêtre de bienvenue d'Android Studio.

  

  Dans la fenêtre Plateformes SDK, choisissez Afficher les détails du package et sous Android 6.0 (Marshmallow), vérifiez que les API Google, Image du système Intel x86 Atom, Image du système Intel x86 Atom_64 et API système Intel x86 Atom_64 sont cochées.

  

  Dans la fenêtre Outils du SDK, choisissez Afficher les détails du package et sous Outils de génération du SDK Android, assurez-vous que l'option Outils de génération du SDK Android 23.0.1 est sélectionnée.

  

• Variable d'environnement ANDROID_HOME

  Assurez-vous que la variable d'environnement ANDROID_HOME pointe vers votre SDK Android existant. Pour ce faire, ajoutez ceci à votre ~ / .bashrc, ~ / .bash_profile (ou à tout ce que votre shell utilise) et rouvrez votre terminal:

  Si vous avez installé le SDK sans Android Studio, cela peut être quelque chose comme: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Dépendances pour Mac

Vous aurez besoin de Xcode pour iOS et Android Studio pour Android, node.js, les outils de ligne de commande React Native et Watchman.

Nous vous recommandons d'installer node et watchman via Homebrew.

brew install node
brew install watchman

Watchman est un outil de Facebook pour regarder les changements dans le système de fichiers. Il est fortement recommandé de l'installer pour de meilleures performances. C'est facultatif.

Node est livré avec npm, qui vous permet d'installer l'interface de ligne de commande native React.

npm install -g react-native-cli

Si vous obtenez une erreur de permission, essayez avec sudo:

sudo npm install -g react-native-cli.

Pour iOS, le moyen le plus simple d’installer Xcode est d’utiliser le Mac App Store. Et pour Android télécharger et installer Android Studio.

Si vous envisagez de modifier le code Java, nous vous recommandons d'utiliser Gradle Daemon, qui accélère la génération.

Test de votre installation native React

Utilisez les outils de ligne de commande React Native pour générer un nouveau projet React Native appelé "AwesomeProject", puis exécutez des run-ios natifs dans le dossier nouvellement créé.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Vous devriez voir votre nouvelle application s'exécuter sous iOS Simulator prochainement. run-ios natif de react-end n'est qu'un moyen d'exécuter votre application - vous pouvez également l'exécuter directement depuis Xcode ou Nuclide.

Modifier votre application

Maintenant que vous avez réussi à exécuter l'application, modifions-la.

• Ouvrez index.ios.js ou index.android.js dans votre éditeur de texte de choix et éditez certaines lignes.
• Hit Command⌘ + R dans votre simulateur iOS pour recharger l'application et voir votre changement! C'est tout!

Toutes nos félicitations! Vous avez exécuté et modifié avec succès votre première application React Native.

_{source: Pour commencer - React-Native}

Configuration pour Windows

Remarque: vous ne pouvez pas développer d’applications réactives pour iOS sur Windows, mais uniquement des applications Android réactives.

Les documents de configuration officiels pour rea-native sur Windows peuvent être trouvés ici . Si vous avez besoin de plus de détails, voici un guide granulaire .

Outils / Environnement

• Windows 10
• outil de ligne de commande (par exemple, ligne de commande Powershell ou Windows)
• Chocolaté ( étapes pour configurer via PowerShell )
• Le JDK (version 8)
• Studio Android
• Une machine Intel avec la technologie de virtualisation activée pour HAXM (facultatif, nécessaire uniquement si vous souhaitez utiliser un émulateur)

1) Configurez votre machine pour réagir au développement natif

Démarrez la ligne de commande en tant qu'administrateur exécutez les commandes suivantes:

choco install nodejs.install
choco install python2

Redémarrez la ligne de commande en tant qu'administrateur pour pouvoir exécuter npm

npm install -g react-native-cli

Après avoir exécuté la dernière commande, copiez le répertoire dans lequel react-native a été installé. Vous en aurez besoin pour l'étape 4. J'ai essayé ceci sur deux ordinateurs dans un cas: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . Dans l'autre c'était: C:\Users\admin\AppData\Roaming\npm

2) Définissez vos variables d'environnement

Un guide étape par étape avec des images peut être trouvé ici pour cette section.

Ouvrez la fenêtre Variables d'environnement en naviguant vers:

[Clic droit] Menu "Démarrer" -> Système -> Paramètres système avancés -> Variables d'environnement

Dans la section inférieure, recherchez la variable système "Path" et ajoutez l'emplacement d'installation de react-native à l'étape 1.

Si vous n'avez pas ajouté de variable d'environnement ANDROID_HOME, vous devrez également le faire ici. Dans la fenêtre "Variables d'environnement", ajoutez une nouvelle variable système nommée "ANDROID_HOME" et la valeur correspondant au chemin d'accès à votre SDK Android.

Redémarrez ensuite la ligne de commande en tant qu'administrateur pour pouvoir y exécuter des commandes réactives.

3) Créez votre projet En ligne de commande, accédez au dossier dans lequel vous souhaitez placer votre projet et exécutez la commande suivante:

react-native init ProjectName

4) Lancez votre projet Démarrez un émulateur depuis Android Studio Accédez au répertoire racine de votre projet en ligne de commande et exécutez-le:

cd ProjectName
react-native run-android

Vous pouvez rencontrer des problèmes de dépendance. Par exemple, il se peut que vous n'ayez pas la version correcte des outils de génération. Pour résoudre ce problème, vous devrez ouvrir le gestionnaire sdk dans Android Studio et télécharger les outils de construction à partir de là.

Félicitations!

Pour actualiser l'interface utilisateur, vous pouvez appuyer deux fois sur la touche r dans l'émulateur et exécuter l'application. Pour voir les options du développeur, vous pouvez appuyer sur ctrl + m .

Configuration pour Linux (Ubuntu)

1) Setup Node.JS

Démarrez le terminal et exécutez les commandes suivantes pour installer nodeJS:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Si la commande de noeud est indisponible

sudo ln -s /usr/bin/nodejs /usr/bin/node

Instalations NodeJS alternatives:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

ou

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

vérifier si vous avez la version actuelle

node -v 

Exécutez le npm pour installer le réactif

sudo npm install -g react-native-cli

2) Configurer Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Configuration d'Android Studio:

Android SDK ou Android Studio

http://developer.android.com/sdk/index.html

SDK Android e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) émulateur d'installation:

Sur le terminal, exécutez la commande

android

Sélectionnez "SDK Platforms" dans le SDK Manager et vous devriez voir une coche bleue à côté de "Android 7.0 (Nougat)". Si ce n'est pas le cas, cliquez sur la case à cocher puis sur "Appliquer".

5) Lancer un projet

Exemple d'application init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: Toujours vérifier si la version sur android/app/build.gradle est la même que les outils de construction téléchargés sur votre SDK Android

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) Exécuter le projet

Ouvrez Android AVD pour configurer un Android virtuel. Exécutez la ligne de commande:

android avd

Suivez les instructions pour créer un périphérique virtuel et lancez-le

Ouvrez un autre terminal et exécutez les lignes de commande:

react-native run-android
react-native start