一.开发环境搭建要求
在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsual Studio Community 2015
Android的开发环境Android Studio(推荐)或者Eclipse在混合开发中也需要用到
二、环境搭建步骤
第一步:安装JDK
1.安装JAVA JDK(需安装1.8或更高版本)
下载对应你电脑系统版本的 1.8 32位或64位JDK。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。留意一下JDK安装的目录
2. JDK环境变量配置
JDK安装完后,需要配置下环境变量
(1)选择 计算机→属性→高级系统设置→高级→环境变量
(2)系统变量→新建 JAVA_HOME 变量 。变量值填写jdk的安装目录(本人是 C:\Java\jdk1.8.0_91)
(3)系统变量→寻找 Path 变量→编辑,在变量值最后输入%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
(4)系统变量→新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)
系统变量配置完毕
(5)检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格)。若如图所示 显示版本信息 则说明安装和配置成功。
第二步:安装Android环境
React Native目前需要Android Studio2.0或更高版本。
除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)。
确定所有安装都勾选了,尤其是Android SDK和Android Device Emulator。
在初步安装完成后,选择Custom安装项:
- 检查已安装的组件,尤其是模拟器和HAXM加速驱动。
安装完成后,在Android Studio的欢迎界面中选择Configure | SDK Manager。
在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。(必须是这个版本)
ANDROID_HOME环境变量
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建
具体的路径可能和下图不一致,请自行确认。
PATH增加如下内容 %ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
第三步:其他环境配置
建议安装上Python 2.7,有些可能不装也没事 下载地址 https://www.python.org/downloads/ 安装git 安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端 下载地址:https://git-for-windows.github.io/
第四步:RN环境设置和搭建
1. 下载稳定版 nodejs v5.7.0 Stable下载网站 https://nodejs.org/en/
2. 安装后命令行输入npm测试是否成功
3.React Developer Tools安装
虽然React Developer Tools在后来的版本中支持Firefox浏览器,但目前对他的支持仍然不是很好 因此建议读者选择通过Chrome浏览器来运行React Developer Tools,下载最新版本的react-devtools-x.xx.x.crx文件打开chrome,地址栏输入chrome://extensions,讲下载crx的文件拖入到chrome窗口的空白处 这时会弹出款确认安装。安装完成后,在“允许访问文件网址”前打钩。安装好的界面如下:
4.创建RN项目
npm install -g react-native-cli
react-native-cli是一个终端命令,它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native的命令。这个安装过程你只需要进行一次。
命令行进入你希望创建项目的目录输入react-native init AwesomeProject
可能会很慢,等等就好,大概200多M的文件,一次不成功,也可以尝试着多试几次或者直接到GitHub上去下载一个初始化项目。
进入上面使用init命令建立的子目录下,在本例中,子目录名是AwesomeProject ,新的npm包会包含更新在运行react-nativeinit命令生成的一些动态文件,例如init创建项目的时候会生成iOS和Android的子项目,我们可以通过以下的命令进行获取最新的代码react-native upgrade
5.运行RN项目推荐使用Android手机进行调试,因为Android启动比较慢,
(1)首先将手机与电脑通过数据线相连。(打开开发者调试模式)
a.在命令行窗口输入“adb devices”如果手机上已经安装了正确的驱动程序并且打开了调试模式,则会显示:
b.继续在命令行中输入“adb reverse tcp:8081 tcp:8081”(需保证手机或者模拟器使用的是Android5.0 或者以上的操作系统,5.0以下的解决方案请自行上网查询)
(2)在RN项目安装目录下,输入命令“react-native run-android”,需要耐心等待一段时间,如果出现以下错误提示:
解决方案:
魅族 Meizu m2 note / 魅族 Meizu MX4 / 华为 Huawei Mate 7 / 华为 Huawei P8 / 小米 Redmi Note 2 / 乐视 Letv X500 无法安装以上手机安装apk时, 可能会报一个 com.android.ddmlib.InstallException: Unable to upload some APKs, 我们需要修改如下几个位置:
a.需要将 android/build.gradle 里的 gradle:1.3.1 改为 gradle:1.2.3
b.需要将 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改为gradle-2.2-all.zip
重新run-android
当你看到下面的界面时,
恭喜你,成功了!
(4)看是否自动弹出另外一个DOC窗口并执行没,否则需要手动打开另外一个DOC窗口执行react-native start
以下网址都是些介绍RN环境搭建和一些异常情况的解决方案的网址,仅供参考:
1.http://reactnative.cn/docs/0.27/getting-started.html(ReactNative 中文网官方文档)
2.http://www.cnblogs.com/meteoric_cry/p/4874517.html(React-Native android在windows下的踩坑记)
3.http://www.lcode.org/react-native%E7%96%91%E9%9A%BE%E7%82%B9%E9%97%AE%E9%A2%98%E6%B7%B1%E5%9D%91%E6%9C%80%E5%BC%BA%E6%80%BB%E7%BB%93%E5%B8%96%E4%B8%8D%E6%96%AD%E6%9B%B4%E6%96%B0%E4%B8%AD/(React Native疑难点,问题深坑最强总结帖)