Mac安装 React Native 开发环境

React Native 是当前最为流行的跨平台移动应用开发开发框架,无论是iOS、Android还是前端开发人员,都应该了解和掌握React Native 开发,本文主要记录Mac上安装 React Native 开发环境时遇到的一些问题。

简介

虽然RN(React Native常用简称,下同)的安装过程无论是在RN官网还是RN中文网都有详细的安装文档,但是由于墙的存在导致我在安装的过程中即使是架梯子也卡在了部分阶段,问题主要在Android的项目运行模拟器安装上,下面会详细介绍。至于其他部分,无论是Android Studio的安装和配置还是iOS的开发环境配置,请查看RN中文网,已经写得非常详细了,下面只会简单描述流程。

安装过程

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

使用Homebrew来安装Node.js,没有梯子的话建议设置npm镜像


brew install node

设置淘宝镜像


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

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

安装React Native的命令行工具(react-native-cli)


npm install -g react-native-cli

安装iOS/Android的IDE

  • iOS的非常简单,App Store搜索Xcode下载就可以了。

  • Android由于Google的原因就非常麻烦了,这里需要详细讲解下

1. 首先参考RN中文网的【安装Android Studio】和【配置ANDROID_HOME环境变量】章节进行安装和配置

2. Shell中输入


adb devices

检测可用的Android设备,截至目前由于还未安装Android模拟器所以输入该命令后并不能显示任何设备,此步骤是检测Android 环境变量是否配置成功。

3. Android Studio自带的原装模拟器安装方法:

首先打开刚才安装好的Android Studio,新建一个Android Project,在Target里选择API23,Android 6.0,这是因为RN需要Android 6.0的API版本,即API 23.0.1。创建好后运行该项目,不出意外的话会卡在打开项目上,因为打开Android项目时需要去墙外下载Gradle,但是我试了两款梯子都无法通过Android studio下载,所以需要自行下载:Gradle 4.1

,下载后打开Finder前往 ~/.gradle/wrapper/dists 目录,这时候一般可以看到一个gradle-4.1-all目录,这就是打开项目时所卡住的下载文件目录,进去后是 bzyivzo6n839fup2jbap0tjew 目录,再打开就可以看到下载的临时文件,将刚才下载的gradle-4.1-all.zip文件粘贴解压后重启Android studio就可以正常进入刚才创建的Android项目了。接下来就是安装原装模拟器,点击Android studio 工具栏的手机图标打开模拟器管理页面

image

选择设备后进入系统选择页面点击x86 Images选择Android 6.0(Google APIs)

image

之后就创建好了Android 6.0的模拟器,

image

点击绿色三角就可以启动这个模拟器了。打开模拟器后需要进入设置,拉到最下面的关于手机点进去连点Android Versions启用开发者模式,之后返回上一级找到Developer options点进去确认USB debugging被选中。现在在shell里输入adb devices命令就可以看到设备信息

,看到后就可以新建RN项目并用Android模拟器启动项目了,这里还需要设置Android 6.0所需要的Gradle版本2.14.1,先下载Gradle 2.14.1,之后前往 ~/.gradle/wrapper/dists 目录查看目录下是否包含gradle-2.14.1-all目录,如果没有就自己新建一个,并在该目录下新建8bnwg5hd3w55iofp58khbp6yv目录后将gradle-2.14.1-all.zip粘贴解压在8bnwg5hd3w55iofp58khbp6yv目录里,之后就可以启动RN项目了,之后启动项目都需要先打开Android studio然后在模拟器管理里面启动模拟器,这样有些麻烦,所以推荐安装 Genymotion模拟器

4. Genymotion模拟器安装

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择。

下载GenymotionVirtualbox并安装,Genymotion安装后需要注册个人账号才可以免费试用。登录后点击ADD选择api23的模拟器进行下载,这一步有可能非常慢,可以自行下载。自行下载需要一点技巧,首先前往~/.Genymobile 目录,里面会有一个genymotion.log文件,打开这个文件在里面找到一个后缀类似于genymotion_vbox86p_6.0_170929_135720.ova的url,复制后用浏览器或者迅雷进行下载,之后复制到~/.Genymobile/Genymotion/ova目录下,之后再重新ADD虚拟机就会跳过下载步骤了,ADD成功之后就可以启动模拟器运行RN项目了。

以上就是Android的模拟器安装步骤,到这里Android的RN开发环境就配置结束,下面讲一下iOS运行RN项目。

5. iOS运行RN项目

iOS的环境配置非常简单,只需要安装XCode后前往/Applications/Xcode.app/Contents/Developer/Applications目录,打开Simulator.app 就可以run-ios了。

结束语

以上就是配置Mac下RN开发环境的一些注意事项,如有问题欢迎咨询我。

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