Construction d'un environnement React-Native + Idea

Dépendent

• Nœud
• Outil de ligne de commande React Native
• Python2
• JDK 1.8
• Idée

Installation et configuration

Compatible avec la communauté chinoise native

• Notez que la version de Node doit être supérieure à 8.3, la version de Python doit être 2.x (3.x n'est pas prise en charge) et la version de JDK doit être 1.8 (actuellement 1.9 et supérieur ne sont pas pris en charge). Après avoir installé Node, il est recommandé de configurer des images npm pour accélérer le processus suivant (ou utiliser des outils Internet scientifiques).

• N'utilisez pas cnpm! Le chemin du module installé par cnpm est étrange et le packager ne peut pas être reconnu normalement!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn, l'outil en ligne de commande de React Native (react-native-cli)

• Yarn est un outil fourni par Facebook pour remplacer npm, ce qui peut accélérer le téléchargement du module de nœud. Les outils de ligne de commande de React Native sont utilisés pour effectuer des tâches telles que la création, l'initialisation, la mise à jour de projets et l'exécution de packagers.

npm install -g yarn react-native-cli

Après avoir installé le fil, vous devez également définir la source miroir:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Après avoir installé yarn, vous pouvez utiliser yarn pour remplacer npm. Par exemple, utilisez yarn pour remplacer la commande npm install et utilisez yarn ajouter un nom de bibliothèque tierce pour remplacer npm install un nom de bibliothèque tierce.

environnement android

Installer Android SDK

Dans l'idée, vous pouvez utiliser Fichier-> Réglage

• Cliquez sur Afficher les détails du package sur la page des plates-formes SDK pour confirmer l'installation des composants de la plate-forme Android 28 et de l'image système Intel x86 Atom_64.
  
• Installez la version 28.0.3 dans SDK Tool-> Android SDK bulid Tool

Configurer les variables d'environnement

• Configurer la variable d'environnement ANDROID_HOME
  React Native doit comprendre le chemin où votre SDK Android est installé via la variable d'environnement, afin de compiler normalement.

• Ouvrez le Panneau de configuration-> Système et sécurité-> Système-> Paramètres système avancés-> Avancé-> Variables d'environnement-> Nouveau, créez une variable d'environnement nommée ANDROID_HOME (à la fois les variables système et utilisateur), pointez où se trouve votre SDK Android Annuaire.

• Le SDK est installé par défaut dans le répertoire suivant:

c:\Users\你的用户名\AppData\Local\Android\Sdk

• Ajouter le répertoire platform-tools à la variable d'environnement Path
  Ouvrez le Panneau de configuration-> Système et sécurité-> Système-> Paramètres système avancés-> Avancé-> Variables d'environnement, sélectionnez la variable Path, puis cliquez sur Modifier. Cliquez sur Nouveau et ajoutez le chemin du répertoire platform-tools.
  Le chemin par défaut de ce répertoire est:

c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

Avant cela, il n'y aura pas trop de problèmes dans le processus d'installation. Après que certaines ressources doivent être sur le mur, cela peut entraîner l'échec du projet.

Créez un projet natif réactif via Idea

Lorsque vous créez un projet à exécuter pour la première fois, vous devez télécharger l'outil de création Gradle. En raison de restrictions telles que la vitesse du réseau sur le mur, des erreurs se produisent lors du téléchargement via Idea, ce qui entraîne l'erreur suivante lors de l'exécution:

Exception in thread "main" java.util.zip.ZipException: 
error in opening zip file

• Il est recommandé de télécharger la version gradle manuellement et de placer le package compressé téléchargé dans le répertoire suivant (aucune décompression manuelle n'est requise)

C:\Users\xxxxx\.gradle\wrapper\dists\gradle-4.7-all\4cret0dgl5o3b21weaoncl7ys

Une fois Gradle installé correctement, vous devez modifier l'adresse du miroir Gradle

• Créez un fichier init.gradle dans le répertoire d'installation de gradle, le contenu est le suivant:

allprojects{
    repositories {
        def ALIYUN_REPOSITORY_URL = 'http://maven.aliyun.com/nexus/content/groups/public'
        def ALIYUN_JCENTER_URL = 'http://maven.aliyun.com/nexus/content/repositories/jcenter'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."
                    remove repo
                }
                if (url.startsWith('https://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."
                    remove repo
                }
            }
        }
        maven {
                url ALIYUN_REPOSITORY_URL
            url ALIYUN_JCENTER_URL
        }
    }
}

• Modifiez le fichier build.gradle dans le répertoire du projet pour changer jcenter en requête http:

  jcenter(){url 'http://jcenter.bintray.com/'}

Enfin, branchez le téléphone pour ouvrir le mode de débogage. La première estimation est d'environ 10 minutes.

react-native run-android

OJBK