React-Native（一）：React Native环境搭建

第一步：安装jdk

从java官网下载jdk8

配置环境变量：

JAVA_HOME：D:\Program Files\Java\jdk1.8.0_111

Path中追加：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

第二步：安装Android SDK

如果遇到墙而无法下载Android SDK的问题，可以参考：http://www.androiddevtools.cn/index.html

Android SDK在线更新镜像服务器

北京化工大学镜像服务器地址:

IPv4: ubuntu.buct.edu.cn/ 端口：80

IPv4: ubuntu.buct.cn/ 端口：80

IPv6: ubuntu.buct6.edu.cn/ 端口：80

大连东软信息学院镜像服务器地址:

mirrors.neusoft.edu.cn 端口：80

郑州大学开源镜像站:

mirrors.zzu.edu.cn 端口：80

使用方法：

启动 Android SDK Manager ，打开主界面，依次选择『Tools』、『Options...』，弹出『Android SDK Manager - Settings』窗口；

在『Android SDK Manager - Settings』窗口中，在『HTTP Proxy Server』和『HTTP Proxy Port』输入框内填入上面镜像服务器地址(不包含http://，如下图)和端口，并且选中『Force https://... sources to be fetched using http://...』复选框。设置完成后单击『Close』按钮关闭『Android SDK Manager - Settings』窗口返回到主界面；

依次选择『Packages』、『Reload』。

　　　　

ANDROID_HOME：D:\Program Files\android-sdk

Path中追加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

第三步：安装git

官方下载地址：https://git-for-windows.github.io/
安装步骤：

选择 Use a TrueType font in all console windows
选择 Windows Command Prompt
选择 Checkout Windows-style,commit Unix-style line endings
选择 Use Windows default console window
全选(有的第二个Enable Git Credendialc Manager是灰色的就不理它了)

环境变量自动添加到path，验证是否安装成功：git --version

Path中自动追加：D:\RN_software\Git\cmd;

第四步:安装python2.7

环境变量配置：

1、在系统变量中添加：PYTHON_HOME：C:\Python27
2、在系统变量Path中添加两个变量值：%PYTHON_HOME%;%PYTHON_HOME%\Scripts

第五步：安装nodejs

官网下载地址：http://nodejs.cn/download/
安装步骤：（忽略，自行百度，下一步下一步...）
　　1、环境变量自动添加到path，验证是否安装成功：node -v
　　2、配置国内淘宝镜像(墙的存在)：
　　　　命令行输入(注意是两条命令，分别输入)：
　　　　npm config set registry https://registry.npm.taobao.org --global
　　　　npm config set disturl https://npm.taobao.org/dist --global
　　3、配置python版本
　　　　命令行输入：npm config set python python2.7

Path中自动追加：D:\RN_software\nodejs\;

React-Native（一）：React Native环境搭建

第七步：安装C++环境

查看自己计算机是否已经安装有Microsoft Visual C++ xxx Redistributable运行库,xxx为2013版本或者2015版本
1、微软官方下载地址：
2013版本：http://www.microsoft.com/zh-CN/download/details.aspx?id=40784
2015版本：https://www.microsoft.com/en-us/download/details.aspx?id=48145
2、安装步骤：（忽略，下一步下一步...）
3、可选项：(安装Visual C++ Build Tools 或者 Visual Studio 2015，推荐前者，后者包太大了！！！)安装前提：.NET Framework 4.5.1 需要最低版本是4.5.1（控制面板卸载程序可看）
Visual C++ Build Tools官网下载地址：http://landinghub.visualstudio.com/visual-cpp-build-tools
Visual Studio 2015官网下载地址：https://www.visualstudio.com/products/visual-studio-community-vs
.NET Framework 4.5.1官网下载地址：https://www.microsoft.com/en-us/download/details.aspx?id=40773
4、如果可选项安装了，这步需要配置：
命令行输入(注意是两条命令，分别输入)：
npm install -g node-gyp
npm config set msvs_version 2015
5、说明：gyp ERR 错误和 Windows_NT 6.1.7601 可执行步骤3和4，详情请看：https://github.com/nodejs/node-gyp#installation

第八步：安装React Native命令行

官网下载地址：https://github.com/facebook/react-native 完成之后解压，进入文件目录react-native/react-native-cli下，

按住Shift键右键打开命令行窗口，命令行输入：npm install -g react-native-cli

验证是否安装成功：react-native -v

第九步：创建React Native项目

1、想在哪里创建项目就在哪儿按住Shift键右键打开命令行窗口，命令行输入：react-native init HelloWorld

2、说明：HelloWorld为自己的项目名，自拟，创建工程时间较长，耐心等待，首次创建可能需要下载gradle2.4文件还有jcenter等等依赖库。

D:\RN_software\app_projects\HelloWord

第十步：运行Packager Server

1、命令行cd进入自己的工程(HelloWorld)目录或者直接进入(需要按住Shift键右键打开命令行窗口),输入命令：react-native start

2、说明：Packager包服务要一直开启

3、浏览器中访问：http://localhost:8081/index.android.bundle?platform=android

React-Native（一）：React Native环境搭建

D:\RN_software\app_projects>cd HelloWord

D:\RN_software\app_projects\HelloWord>react-native start

Scanning  folders for symlinks in D:\RN_software\app_projects\HelloWord\node_modules (47ms)

 ┌────────────────────────────────────────────────────────────────────────────┐

 │  Running packager on port .                                            │

 │                                                                            │

 │  Keep this packager running while developing on any JS projects. Feel      │

 │  free to close this tab and run your own packager instance if you          │

 │  prefer.                                                                   │

 │                                                                            │

 │  https://github.com/facebook/react-native                                  │

 │                                                                            │

 └────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in

   D:\RN_software\app_projects\HelloWord

React packager ready.

Loading dependency graph, done.

第十一步：运行自己的React Native项目

1、准备模拟器或真机运行android。

2、命令行cd进入自己的工程(HelloWorld)目录或者直接进入(需要按住Shift键右键打开命令行窗口),输入命令：react-native run-android

3、说明：期间有可能会报一些error，也有可能不会出现

错误一：找不到Android SDK的路径，解决方案，修改环境变量

ANDROID_HOME：D:\Program Files\android-sdk

Path中追加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

错误二：没有安装Android SDK Platform 23

Warning: License for package Android SDK Platform  not accepted.

FAILURE: Build failed with an exception.

* What went wrong:

A problem occurred configuring project ':app'.

> You have not accepted the license agreements of the following SDK components:[Android SDK Platform 23].

Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.

Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

解决方案：

React-Native（一）：React Native环境搭建

如果运行成功，这会在手机上安装HelloWord软件。这里需要使用到droidAtScreen-1.2.jar(手机屏幕分享工具)：

下载地址：http://droid-at-screen.org/download.html

React-Native（一）：React Native环境搭建

参考资料：http://www.reactnative.vip/thread-243-1-1.html

秒客网

React-Native（一）：React Native环境搭建

Android SDK在线更新镜像服务器

使用方法：

相关文章