第二章 RN环境搭建、项目结构、运行与调试介绍

(一)Rn搭建环境

       最开始肯定是要面临系统的选择,在这里不推荐windows,虽然作者不太懂ios,但是也知道选择了windows就意味着,在后面原生与Rn结合开发的时候放弃了IOS,你如果不嫌麻烦硬要开个虚拟机,那另说。我推荐macbookpro 15寸 512G,mac上有些独有的开发工具可以提高效率… 

备注:在这里就顺便说一下mac的几款常用免费开发软件吧:Sublime Text3(结合几个插件如React-native-snippets、babel,用作免费的React Native开发工具,有钱的可以用webstorm)、Chrome (用来调试Rn),Eclipse、office套装(这个要破解,需要资源的话可以自己搜或找我要)、Xcode(这个要在App Store里下),Android Studio、VirtualBox,为啥要用Virtualbox是因为我习惯于svn的windows版小乌龟了,弄了个win7,然后共享了下目录…一直这样将就着;好,下面正式开始环境搭建:

1)安装Homebrew,Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。(顺带一提,这玩意儿不错,我的virtualbox就是用这个装的,他会自动配置环境变量,而且卸载只要uninstall即可,不用害怕卸不干净)

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

在Max OSX 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复: sudo chown -R `whoami` /usr/local

2)homebrew安装好后,就要开始安装Node.js和Watchman

Nodejs是基于 Chrome V8 引擎的 JavaScript 运行环境,他添加了一堆系统级(操作文件、驱动)的API,为JS提供了服务端的开发方案。之前有人问过我为什么Rn开发需要Node环境,在本章的项目结构阶段会详细说明。

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)

brew install node       

brew install watchman

备注:还有一款Flow,是一个静态的JS类型检查工具,因为语法很独特还需要耗时间去学,所以新手就不用去学了,如果强行要用,你就装下自己去玩吧~

brew install flow

3)xcode安装,这个就不得不说下了,Rn中文网上说xcode可以是7.0以上的,但我的7.2在编译RN中的ios项目时一直报错,错误已经忘了,就是一个东西没有定义,删除了以后又说一个bgcolor没有定义…google上各种搜,都没有能解决的,升级xcode8又一直转圈,没法升级…最后是先把系统升级到了10.12.3 Sierra后,才成功下载了xcode8,编译瞬间成功,可开心了!

4)AndroidStudio环境安装:下个jdk,在用户的bash_profile下配环境变量,然后下个AS安装就行了,可能要下一大堆sdk(没有强迫症的可以选几个喜欢的下就行),这个网上傻瓜教程一大堆,google官方的Android教程都是mac的开发环境,弄完了创建个虚拟机跑个helloworld看下,

备注:如果说前面的你不翻墙还行,那这里下sdk还不翻墙你就该哭了!

5)安装Yarn、React Native的命令行工具

这里最好是翻墙,如果不翻墙安装肯定出错,网速不稳定的话也会出错,

所以如果不翻墙的话就需要设置npm镜像以加速后面的过程

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

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

(备注:npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,类似于mac的homebrew,官网号称是全球最大的开源库生态系统 - -)


npm install -g yarn react-native-cli

安装完上面的命令后,就可以使用react-native的命令了,可以init一个rn项目,或者进行更新等操作。

(备注:看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local)

最后,运用 react-native init firstRNapp初始化一个Rn项目

(firstRNapp是项目名,这个初始化的时间比较长,如果不翻墙还没配npm镜像的话会出现报错,所以这个过程出现的错误可能是网络错误)


初始化成功的页面

(二)RN项目结构


初始Rn项目目录

入门项目中有用的就这4个目录,

①android是编译出来的Android工程,下面有我们熟悉的build.gradle,可以导入为As工程。

②Ios为IOS项目,里面有一个

双击可以直接将xcode启动,

③上面两个目录可以说是Native项目壳子,那么index.android.js和index.ios.js就可以看成是rn项目的ios和Android入口,通常情况下他俩是相同的内容,入门项目中就是在这两个文件中进行页面的开发。

④package.json这个就关键了,从内容上就可以看出他的功能应该是类似于Android项目中的build.gradle,说明了整个Rn项目的名称,版本号,以及需要的依赖等等。后面引入第三方组件其中一步,就是要在这些依赖中添加条目。


package.json

      上面有个目录node_modules,这个目录是node通过解析package.json 下载的相关依赖。为啥说它没用呢,就是说我们在拷贝别人的项目的时候这个是个完全不需要拷贝的目录,我们只需要对好package.json,然后通过npm install命令,就可以重新生成对应的node_modules目录。

备注:其中node_modules和 package.json都是NodeJS相关的目录

而且node有模块化的思想(Rn有组件化的思想),我们写的页面JS需要操作文件, 引入我们的组件和格式各样的配置,不是像前端的引入方式,而是通过在首行import进来。

而且也可以看到,我们在开发的过程中一直在不断的使用node的npm包管理,去下载各种第三方依赖;所以,现在可以理解为什么Rn开发会需要node的环境了么?


(三)Rn运行与调试

1、IOS运行

双击ios目录下的

或者后缀类似的文件

在右边选择一个分辨率低点的设备,然后点左边的三角编译运行

就可以看到项目运行起来了,

这里启动了一个React Packager和一个ios iPhone6的虚拟机,显示了一个Rn的欢迎界面。页面的内容就是在之前提到过的入口index文件中编写的。至于右边的React Packager,这是一个微型http服务器(8081),负责把我们所有写的js文件以及依赖的第三方js打包起来,发给右边的“壳子”。

如果index.ios.js发生了改变,可以通过快捷键cmd + R,reload js

cmd + shift +h是home键;cmd + D调出菜单

菜单中第二个是在chrome中调试用到的,

第三个如果允许的话,js改动后,在壳子中会自动reload

2、Android运行

因为我是Android开发者,所以习惯性的将android下面的壳子工程导入到AndroidStudio中,导入后会加载并下载一些需要的东西,然后更新gradle,

更新完gradle之后同步,还会再次报错,然后点击一下下面的Fix链接即可解决

因为mac的google原生虚拟机运行起来十分的流畅,所以我就直接用的官网下的虚拟机,我用的是:

注意:ios开启的时候,react Packager是自动弹出来的,如果我们之前没有打开react Packager,那么这样运行Android的壳子是无法自动弹出的,需要我们cd到我们的Rn项目,然后输入react-native start来人工开启服务;然后再运行壳子。

cmd +M调出菜单,功能同ios设备上的菜单。

若想要在真机上调试,则需要在Android的配置中加ip端口,然后reload:

备注:我没用官方的那个react-native run-android或run-ios,是因为要下载一大堆东西,我还是习惯让As自己来搞,选择自己喜欢的方式启动即可。

3、Rn开发调试

①选择菜单中的第二项,会自动弹出Chrome,然后用cmd +option +i

打开控制台,然后再console中查看我们打印的日志,

②断点调试位置

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

推荐阅读更多精彩内容