简介
React Native是Facebook推出的一个可以用javascript直接开发原生APP的开源框架。这个框架的出现,给客户端开发人员解决了很多困扰。比如在原生开发过程中,不能像web应用那样,文件保存后在浏览器中刷新一下就能看到改变的结果,原生开发的每次改动都得重新编译和构建,哪怕是视图几个像素的移动,或是字体颜色的微调,这就使得很多的开发调试工作变得缓慢,尤其是当一个大工程编译特别慢的时候。但是由于web上的体验跟原生组件上的差别,即便开发原生app要耗费更多的时间,我们为了创造最佳的用户体验和适应这个平台上的用户操作习惯,同时为做到web app难以实现的高性能和快速响应的体验,我们又不能摒弃原生开发。
React Native用iOS自带的JavaScriptCore作为JS的解析引擎,然后渲染平台独有的组件。这样我们既可以在新项目中直接基于React构建,也可以在旧项目的合适部分中去尝试性的使用它。
想了解更多React Native是什么以及为什么Facebook打造了它相关内容,可以看下这篇博文。
环境配置
首先,使用 Homebrew 官网提供的指引安装Homebrew,然后在终端执行以下命令:
brew install node
接下来,使用 homebrew 安装watchman,一个来自Facebook 的观察程序:
brew install watchman
通过配置 watchman,React 实现了在代码发生变化时,完成相关的重建的功能。就像在使用 Xcode 时,每次保存文件都会进行一次创建。
接下来使用 npm
安装 React Native CLI 工具(为避免因未获得管理员权限出现的安装问题,建议在命令前加sudo
):
npm install -g react-native-cli
这使用 Node 包管理器抓取 CLI 工具,并且全局安装;npm
在功能上与 CocoaPods 或者 Carthage 类似。
浏览到你想要创建 React Native 应用的文件夹下,使用 CLI 工具构建项目:
react-native init PropertyFinder
现在,已经创建了一个初始项目,包含了创建和运行一个 React Native 应用所需的一切。
打开刚刚创建的文件夹和文件,你会发现一个node_modules
文件夹,包含了 React Native 框架。你也会发现一个index.ios.js
文件,这是 CLI 工具创建的一个空壳应用。最后,会出现一个 Xcode 项目文件和一个 ios文件夹,包含了少量的代码。
在进入编码工作之前,你需要编写大量的 JavaScript 代码,Xcode 并非是最好的工具!我使用WebStorm。不过, Sublime Text,atom,brackets 或者其他编辑器都能胜任这份工作。
然后用xcode打开并运行PropertyFinder工程,看下效果吧。同时可以修改下index.ios,js保存后返回模拟器,按下Cmd+R,看下应用程序界面刷新后的效果吧。