前言
最近公司可能会用到React Native,所以先搭个环境先看看,用到的工具主要有以下几个:
-
Homebrew 是一个方便开发者在Mac OS X系统上面安装Linux工具包的Ruby脚本工具,主要用于安装后面需要安装的Watchman、Flow ,而Mac OS X下已经内置了Ruby的解释环境.
因此安装Homebrew只需在Mac终端下执行以下命令:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- [Node.js](https://nodejs.org/) 是一个Javascript运行环境(Runtime),执行Javascript的速度非常快,性能非常好,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用[事件驱动](http://baike.baidu.com/view/536048.htm),非阻塞[I/O](http://baike.baidu.com/subview/300881/11169495.htm) 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。
安装Node.js在终端下执行以下命令:
brew install node
- [Watchman](https://facebook.github.io/watchman/) 是Facebook开源的一个文件监控服务,React Native 用它来检测代码变化,以便重新编译。
安装Watchman在终端下执行以下命令:
brew install watchman
- 接下来是安装react-native-cli,安装比较简单:
npm install -g react-native-cli
NPM 是 Node 的包管理器。你可以将它想象成 Ruby 中的 RubyGems、iOS 的 CocoaPods,以及 Java 中的 Gradle/Maven 等。它能够让你更容易地下载和管理项目所需的任何相关项。
***
[React Native](https://facebook.github.io/react-native/docs/getting-started.html) 安装环境到这里基本就配置好了,下面创建一个iOS的例子,在终端中将目录切换到你保存工程的目录,然后执行如下的命令:
react-native init ReactNativeProject
> 注:创建工程由于需要加载很多包,所以会比较慢一点。此命令建的工程默认在 /Users/[你的用户名]下,**ReactNativeProject**为创建的iOS工程名称。
最后打开iOS工程:
open ios/ReactNativeProject.xcodeproj
直接在Xcode上点击Run运行工程(需要加载Shell脚本会比较慢一点),但如无意外会报以下错误:
![版权所有,请勿盗图哈](http://upload-images.jianshu.io/upload_images/1940170-e7994d8bd865e411.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
出现以下错误,如果前面安装都正确的话,基本上是由于地址不对,但是为了保险起见,还是在终端下执行以下命令:
npm start
然后在**AppDelegate**里面修改jsCodeLocation地址:
>注明:React创建的工程没有针对iOS9下https做处理,因此请在手动在**Info.plist**文件App Transport Security Settings项,增加Allow Arbitrary Loads=YES
![版权所有,请勿盗图哈~~](http://upload-images.jianshu.io/upload_images/1940170-00e008c0d8e153dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最终运行效果如下:
![版权所有,请勿盗图哈~~](http://upload-images.jianshu.io/upload_images/1940170-1715d16da70cc34b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)