【React Native】Running Helloworld

系统要求：

1、OS X - 当前仅支持 OS X、Xcode只在Mac上才能运行

2、如安装IOS、需要 Xcode 6.3 或者更高的版本。可以从Mac应用商店下载； 也可以在 App 应用商店里面安装它。

3、Node或者npm的新手可以通过以下命令来安装Node.js

如果未安装brew、可执行如下命令：

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

• 
• brew install node
• 
• 通过下面命令查看安装是否成功、能看到版本号则安装成功：
• node -v
• 

4、我们建议安装watchman，否则你可能会遇到node的文件监控bug

• 
• brew install watchman
• 
• 通过下面命令查看安装是否成功、能看到版本号则安装成功：
• watchman -v
• 

5、如果你想使用flow，可以通过以下命令安装

• 
• brew install flow
• 
• 通过下面命令查看安装是否成功、能看到版本号则安装成功：
• flow version
• 

  NRM切换国内源

• 以前我们介绍过cnpmjs.org和最近推出的淘宝 npm 两个 NPM 镜像。除此之外，还有一些国外的 NPM 镜像。不同地区访问不同的镜像速度可能有差异，然后各个镜像各自都可能有少数包暂时没有同步，因此，有时候需要切换 NPM 镜像。相比每次切换时都手动指定相应参数，使用nrm 要方便的多。

  nrm 是一个 NPM 源管理器，允许你快速地在如下 NPM 源间切换：

• npm
• cnpm
• strongloop
• european
• australia
• nodejitsu
• taobao

?安装

; npm install -g nrm

使用

列出可选的源

; nrm ls                                                                                                                                    

* npm ---- https://registry.npmjs.org/

  cnpm --- http://r.cnpmjs.org/

  taobao - http://registry.npm.taobao.org/

  eu ----- http://registry.npmjs.eu/

  au ----- http://registry.npmjs.org.au/

  sl ----- http://npm.strongloop.com/

  nj ----- https://registry.nodejitsu.com/

带 * 的是当前使用的源，上面的输出表明当前源是官方源。

切换

切换到taobao

; nrm use taobao                                                                                                                             

   Registry has been set to: http://registry.npm.taobao.org/

• 增加源

你可以增加定制的源，特别适用于添加企业内部的私有源。私有源可以使用cnpmjs架设。

nrm add  <registry> <url> [home]

删除源

nrm del <registry>

测试速度

你还可以通过 nrm test 测试相应源的响应时间。

例如，测试官方源的响应时间：

; nrm test npm                                                                                                                               

  npm ---- 1328ms

测试所有源的响应时间：

; nrm test                                                                                                                                   

  npm ---- 891ms

  cnpm --- 1213ms

* taobao - 460ms

  eu ----- 3859ms

  au ----- 1073ms

  sl ----- 4150ms

  nj ----- 8008ms

注意，为了取得较准确的结果，可以考虑多次测试取平均值。

快速运行

1、在mac的终端的根目录下执行命令、安装react-native的命令行工具、如果安装过程很慢、请参照注意事项

2、-g 代表全局安装

• npm install -g react-native-cli
• 

2、在根目录下新建名为Helloworld的新项目、如果是已有项目、直接进入第三步、进入项目目录

• react-native init Helloworld

3、然后进入到Helloworld目录下：

• cd Helloworld

4、执行npm的对依赖包的检查和下载文件中引用却未安装的依赖包、没有ERR的错误证明检查通过、可能在mac下需要sudo命令、

• npm install
• sudo npm insall

5、启动npm的服务、通过监听端口（默认8081）、类似于web服务器（Apache）、此时这个窗口一定不能关闭、我们再新建一个窗口、进入下一步

• npm start      
• react-native start
• 

6.1、我们有两种法式打开苹果自带的Simulator模拟器来模拟ios设备、如果是按照上述方式建立的项目、参照如下命令；如果是网上下载的案例、可能会运行不了该命令、参照6.2、

• react-native run-ios 
• 

6.2、在项目目录中执行如下操作：

• 打开AwesomeProkect.xcodeproj，然在在Xcode中点击run运行
• 
• 若出现如下错误、原因是有些环境依赖的组建没有安装
• 
• 上面这个问题就是picker这个三方组件没有安装
• 安装使用如下命令：
• npm install react-native-menu --save

7、调试运行

• 用文本编辑器打开index.ios.js，编辑一些代码
• 在iOS simulator中按cmd + R(twice)来重载APP，并且观察之前的改动

恭喜！您刚刚成功的运行并且编写了您第一个React Native应用。

8、如果是需要联网获取数据的情况、请跳至注意事项

注意事项：

1、额外有一步操作在官方文档中没有体现，否则会运行失败。具体如下，两种方式任选一种：

打开项目中的AppDelegate.m

• 方式一：找到这行代码：jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]，将localhost换成自己的ip
• 方式二：
  • 注释掉方式一中的代码
  • 去掉jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];前面的注释。
  • run npm start
  • run curl http://localhost:8081/index.ios.bundle -o main.jsbundle 如果失败的话在后面加上--ipv4
  • 在XCode中，右击你的项目文件夹，点击New file，选择你生成的main.jsbundle。
• 推荐第一个方法比较简单。
• 现在就可以在无无服务器的环境下运行你的app拉。