React Native开发环境搭建 – Windows & Mac篇

win

React Native的开发环境配置可能是比学习本身更折腾人,原因之一是官方教程大量沿用mac os下的命令行套路。

这些命令行导致不熟悉命令行的朋友一筹莫展,这些个命令行还极其依赖外网环境,熟悉mac os操作的人毕竟比较少,会翻墙的也少,

iOS开发硬性要求的苹果机(虽然可以用黑苹果)也是限制普及的一大原因。

但RN毕竟感觉势不可挡,极有可能成为移动开发领域人人必学的技术,没有条件怎么办??

方法总比问题多,首先是Windows上的配置步骤。

经过实践,小波我找到了一种命令行最少(几乎没有)的一种配置方式, 下载安装包安装就好了,而且是时间调配最佳的安装方式。

 

系统要求:Windows 7 64位。

首先下载这么一堆软件(我辛苦爬墙来的,刷点好评吧)

http://pan.baidu.com/s/1slKQZoD

按其中文件名前面序号①②…这样子来安装。

 

第一个node.js安装好后,开启一个命令提示符进入桌面所在路径(cd Desktop/), 输入以下命令来安装 RN的运行时(大概耗时10分钟-电信未爬墙)

第五个Android Studio有1G多,下载比较耗时,这时候可以初始化一个RN工程(耗时10-20分钟-电信未爬墙),开启一个命令提示符进入桌面所在路径(cd Desktop/), 输入以下命令:

 

HelloWorld是你自定义的工程名。

注意:如果你之前安装过Android Studio,需要在执行卸载程序后,再清理才能重新安装,否则会出现不能识别SDK的错误.  

删除以下文件夹或文件

 {当前用户名}/appData/Local/Android 

{当前用户名}/.android,

{当前用户名}/.AndroidStudio

{当前用户名}/.gradle

{当前用户名}/.m2

{当前用户名}/Roaming/JetBrains

C:/Program Files/Android

 

最后一步:安装Android Studio时,选 自定义安装, 把所有的都勾上(就是1G多那个安卓模拟器组件)。

由于到目前为止安装包都没解决的一个白痴bug:安装完模拟器默认无法启动….。必须手动下载模拟器所需要的镜像文件。

 

  • 启动Android Studio,欢迎界面中点Configure > SDK Manager
  • SDK Platforms选项卡中,勾上Show Package Details,然后在Android 6.0 (Marshmallow)中勾上
    • Intel x86 Atom System Image
    • Intel x86 Atom_64 System Image
    • Google APIs
    • 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 , 值 %USERPROFILE%\AppData\Local\Android\sdk
  • 然后编辑PATH变量,在其后增加 ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools (这里注意每一个路径以半角分号来分隔),现在可以打开一个命令提示符窗口来确认是否配置路径成功,输入android回车即可成功启动Android SDK Manager。

这时候可以打开Visual Studio Code, 打开桌面的HelloWorld文件夹,安装好React Native插件,选Debug Android即可运行了。

相关视频稍后补上。

 

Mac版配置:

软件合集下载:http://pan.baidu.com/s/1pLVe8hd

Mac上的配置相对更简单一些,无需安装Python。首先安装Node.js, 接着RN运行时(步骤同上),再是JDK8。如果安装了DECO IDE,DECO相比较VS Code的缺点就是字体太小且没法变更,新建工程不需要react-native init。 启动安卓虚拟机和iOS模拟器非常快。

在安装Android Studio时如果提示无法显示Addon, 设置代理后再下载Android SDK(Mac版的安装程序不自带Android SDK);SDK Manager的配置和在Windows上配置是一样的。

在当前用户目录新建一个.bash_profile文件(相当于Windows上的当前环境变量)

~/.bash_profile

 

 

安装完毕如果遇到Android Studio Emulator “/dev/kvm is not found”错误,参照以下步骤:

  1. 确认 SDK Manager -> Extras -> Intel x86 Emulator Accelerator (HAXM installer) 安装了
  2. 打开终端转到 <sdk>/extras/intel/Hardware_Accelerated_Execution_Manager/
  3. 运行 ./HAXM\ installation -u
  4. 运行 ./HAXM\ installation

有疑问的可以进群:413973180讨论。每周React Native基础教学直播,关注斗鱼房间号:57621