创建ReactNative工程

最近在学习React-Native开发，是由Facebook出的。把学习经验记录一下，加深对React-native的了解。

根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。这里主要说Mac OS下的ios开发。

首先是要配置开发环境，安装一些必须的软件。

一。环境配置：

(1).在mac上安装Xcode,建议Xcode7.0及以上版本。

(2).安装Homebrew,Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。安装有点慢，安装后运行brew help看是否成功。

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

(3).安装node.js终端：brew installnode查看安装的版本：node -v(4).安装watchman，安装此工具可以提高开发时的性能：

brew install watchman

(5).Flow是一个静态的JS类型检查工具。安装flow:brew install flow

(6.1).安装开发编辑工具，FaceBook提供的是基于Atom的Nuclide。

首先需要到官网下载Atom；

然后安装Nuclide,Nucilde是作为一个插件提供的。下载很慢，安装几次Nuclide,功夫不负有心人在科学上网的情况下终于成功。如何安装这里是基于Atom的图形化来安装的，

a,打开Atom，点击菜单栏：Atom->Preferences,或者可以”Command+,”快捷打开

b,选择Install，在Install Packets的输入框中，输入nuclide，搜索到facebook的nuclide。

c,点击install,这个工程可能会比较慢。当出现这种情况说明下载成功了。

d,返回Atom界面或退出重新打开，看看有没有安装nuclide时默认安装的一大堆依赖包。如图

e,如果有就说明安装成功了，果没有默认安装这些依赖包，可以选中,Packages->Settings View->Manage Packets，然后，搜索nuclide，双击Setting进入设置。勾选Install Recommended Packets on Startup。

退出再打开就会自动安装依赖包了。

(6.2).还有一个是WebStorm，用起来挺方便，但是是收费的，可免费试用一个月。

配置基本就好了，不过可能中间会出现各种问题。

二。创建一个React-Native项目：

(一.)安装命令行工具(只需要执行一次，之后就可以直接从下面的第二部开始)：

sudo npm install react-native-cli -g

查看安装的版本：npm -v

(二.)在桌面创建一个空项目：

cd desktop//把文件夹创建在桌面

react-native init HelloWorld //创建一个HelloWorld工程

(三.)运行项目

1.找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。

2.使用终端命令运行项目：cd 该项目文件夹

react-native run-ios

3.在WebStorm中运行，点击右下角的图标，选择Terminal, 输入react-native run-ios即可运行。或输入npm start在模拟器打开的情况下运行。

4.在Nuclide中运行，运行react native packager使用快捷键command + shift + p打开终端选项。输入reactnativestart然后，选择Nuclide React Native :Start packager

接着终端运行项目看第二点。

这时你会看到模拟器界面，command + shift + p 输入react native debug选中模拟器command+D,选择Debug JS Remotely开启调试。你会看到，Nuclide中，加载了debug窗口。

和很多IDE一样，在每一行左边左键可以添加断点了。

5.模拟器刷新界面，使用快捷键command+R，不起作用。怎么回事？

选中模拟器，选择Hardware->Keyboary ->Connect Hardware Keyboary 设置选中。然后再使用command+R或command+D就可以了。

或使用快捷家shift+command+k,然后再使用command+R就可以刷新界面了。6不6！

OK，这样一个项目就创建成功了。

三。工程文件说明：

index.ios.js是react-native ios开发之旅的入口文件，类似Xcode的AppDelegate。

index.android.js是react-native android工程入口文件。

node_modules是项目开发所依赖的模块或开发包。如果一个react-native工程没有导入node_modules文件，需要打开终端：

cd 工程目录

npm install

目的是导入node_modules依赖包。但由于网路原因可能执行这个命令时，会很慢或一直等待。

或者在WebStorm的Terminal中输入npm install 也可实现。

NPM和package.json的作用：NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。现在的Nodejs已经集成了NPM。

终端输入：npm -v//查看当前安装的npm版本

npminstall--save安装的同时，将信息写入package.json中

项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装或者更新所有的依赖包和第三方包。

这样代码提交到github时，就不用提交node_modules这个文件夹了。

npm init会引导你创建一个package.json文件，包括名称、版本、作者这些信息等

npmremove移除

npmupdate更新

package.json文件中name和version是最重要的两个字段，也是发布到NPM平台上的唯一标识，如果没有正确设置这两个字段，包就不能发布和被下载。

scripts通过设置这个字段可以是NPM调用一些命令脚本，封装一些功能。

dependencies指定依赖的其他包，这些依赖是指包发布后正常执行时所需要的。如果是开发中依赖的包，可以在devDependencies设置。

package.json作用和cococPods的Podfile文件有点类似， 就是下载react-native依赖包和其他第三方库。

其他的文件有什么作用，还没有深入了解。

四。NPM install报错：如果从gitHub上下载的项目没有node_modules文件，执行npm install时，出现：npm WARN enoent ENOENT: no such file or directory , open ‘xxxx\package.json’ 错误。

解决:package.json文件中的start对应的路径或是react-native的版本低的原因。

把项目从-master文件中复制出来或者在打开项目时选择-master里面的项目文件，而不是选择-master文件打开。

然后可到你新建的工程中的package.json文件中，把start对应的字符串复制过来，把dependencies对应的react-native和react的版本号也一起复制过来吧，如果还有其他的则保持不变，或者找到它对应的最新版本。

最后在重新执行npm install。

这样就可以下载或更新react-native依赖包和其他第三方库了

运行报错：Cannot find entry file Examples/Movies/MoviesApp.ios.js in any of the roots:['xxx']原因：有一个其他的应用正在运行占用了package,退出原来应用程序，关闭chrome调试器，关闭模拟器，关闭编辑器webStrom或Atom。然后重新启动程序，这样就可以了。

注意⚠️：xcode运行时可能会出现链接错误，解决方案如下