React Native环境的搭建

尽管在移动开发中,原生APP的开发成本很高,蛋现阶段基于原生开发仍然是必须的因为Web的用户体验仍无法超越Native,主要体现在:

1. Native的原生控件有更好的体验

2. Native有更好的手势识别

3. Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,蛋如图像解码.文本渲染仍无法多线程渲染,这影响了Web的流畅线条

React Native 的核心设计理念:既有Native的用户体验有保留React的开发效率

可以实现: H5 Android  iOS 多端代码的复用

配置MAC开发环境

1.先安装Homebrew：用于安装NodeJS和其他工具。 Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

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

安装完成之后,出现success界面大概如图(我没有截全):

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复： 

sudo chown -R `whoami` /usr/local

2.安装Node，使用Homebrew来安装Node.js.React Native目前需要NodeJS 5.0或更高版本。Homebrew默认安装的是最新版本，一般都满足要求。 

brew install node

如果电脑上之前已经有了brew，先更新下brew，使其在最新版本，代码如下：


brew update  

可以检查下brew是否有什么问题

brew doctor  

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

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

3.安装React Native 命令行工具npm

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。npm是一个包管理工具，它是用来管理node的，详细介绍请看npm详解 
命令行工具可以轻松创建和初始化工程：

npm install -g yarn react-native-cli

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

sudo chown -R `whoami` /usr/local

Xcode

React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等

推荐安装的工具

Watchman

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

brew install watchman

安装Flow

Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

你也可以在Nuclide中打开AwesomeProject文件夹 然后运行，或是双击

ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

安装完之后

 用WebStorm 里面配置运行React Native

1.首先点击WebStorm右上方的下拉箭头弹出的Edit Configurations....




2.然后会进入一个配置页面.点击左上方的+.在弹出的列表中选中npm.如图.

3.在右边的配置框中,先选择Command为help.接着点击下方的+号.再点击Run External tool.

4.在弹出框中选择+号.

5.在弹出的配置框中,填写相应信息.

     Name为该按钮的名字

    Program为react Native的路径,终端命令:which react-native  一般都是   /usr/local/bin/react-native

    Parameters填 run-ios

    working directory该输入框中,先点击右边的insert macro,选择ProjectFileDir.

.

5.点击OK.接下来点击Apply回到主界面.可以看见右上方的按钮.点击即可运行项目了.

 

有时,需要更换不同的机型看看运行效果,这时,需要先切换至Terminal.然后敲入相应命令:

如:

react-native run-ios --simulator "iPhone 5"

遇到的问题:error: unable to find utility “instruments”, not a developer tool or in PATH

解决方法:sudo rm /usr/bin/instruments

      sudo ln -s /Applications/Xcode.app/Contents/Developer/usr/bin/instruments/usr/bin/instruments

      sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer


      如果　  sudo rm /usr/bin/instruments Operation not permitted

      这是由于OS X El Capitan中，在内核下引入了Rootless机制


　　　 重启　苹果按　开机按住Command + R 进行恢愎模拟（就是安装系统的界面）

　　　 打开终端输入csrutil disable就可以关闭了




注意:用了此方法可能导致模拟器丢失的问题

依次打开“Xcode->Window->Devices”，会发现原来”“iPhone 5”和“iPhone 5s”躺在这里，点击位于左下角的“+”按钮，新增常使用的设备即可，不常使用的设备也可以在选中后，点击“-”移除。

这样就吧丢失的模拟器可以创建导入了！