第二章 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中查看我们打印的日志,

②断点调试位置

推荐阅读更多精彩内容