React-Native+Idea环境搭建

依赖

• Node
• React Native 命令行工具
• Python2
• JDK 1.8
• Idea

安装配置

和react-native中文社区一致

• 注意 Node 的版本必须高于 8.3，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。

• 不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

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

Yarn、React Native 的命令行工具（react-native-cli）

• Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源：

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

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

android 环境搭建

安装android sdk

在idea中可以通过File->Setting

• 在 SDK platforms 页面点击Show Package Details 确认安装Android platforms 28和 Intel x86 Atom_64 System Image两个组件。
  
• 在SDK Tool->Android SDK bulid Tool 安装28.0.3版本

配置环境变量

• 配置 ANDROID_HOME 环境变量
  React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

• 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录。

• SDK 默认是安装在下面的目录：

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

• 把 platform-tools 目录添加到环境变量 Path 中
  打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。
  此目录的默认路径为：

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

在此之前安装过程中都不会有太大的问题 之后由于部分资源需要翻墙的原因，可能会导致项目运行失败。

通过Idea创建react-native项目

在首次创建项目运行时，需要下载gradle构建工具，由于网速翻墙等限制，通过Idea 下载时会出错，导致运行时出现以下报错：

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

• 建议手动下载gradle版本，将下载好的压缩包放入以下目录(不需要手动解压)

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

在gradle正确安装之后需要更改gradle镜像地址

• 在gradle安装目录创建init.gradle文件，内容如下：

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
        }
    }
}

• 修改项目目录下build.gradle文件 将jcenter改为http请求：

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

最后插上手机 打开调试模式。第一次估计要个10分钟左右。

react-native run-android

OJBK