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

2017-03-10 本文已影响4895人大杰哥_2bec

（一）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调出菜单