Windows版本搭建安装React Native环境配置

一.开发环境搭建要求

在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疑难点,问题深坑最强总结帖)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容