react-native 初体验

去年年初写了一个 chrome 扩展「十阅」后,一直想写个十阅 app 出来,奈何懒癌后期,一直拖到最近才完成原型。

其实很早之前就已经写过一个 hybrid app 了,使用了 Ionic 框架,这是一款使用前端 web 技术来构建 app 的框架。使用了流行的 Angular,使用 Cordova 来使用 native 的功能,最赞的是它有一套优美的设计模板,类似于 bootstrap,通过它你可以轻松实现优雅漂亮的设计。

如果你熟悉 Angular 和 Cordova,基本上非常容易上手。我花了 3 天完成了 app(1天解决 HTML DOM 解析问题,1天解决调用系统浏览器打开链接问题)。

这次心血来潮(闲的蛋疼),想起去年年初就有所耳闻的 react-native,于是就打算用它来耍耍。

准备开发环境

  1. OS X,开发 iOS 必须使用 OS X 系统
  2. 装好最新版本的 Node.js
  3. 安装 watchman (推荐使用 Homebrew 来安装watchman)
  4. 安装 Xcode 最新版

快速开始

$ npm install -g react-native-cli
$ react-native init AwesomeProject

运行iOS应用

  • $ cd AwesomeProject
  • $ react-native run-ios 或者 用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。
  • 使用你喜欢的文本编辑器打开 index.ios.js 并随便改上几行。
  • 在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

基本上到这一步,你都可以看到你的第一个 react-native 应用运行起来了。

前方高能

开发流程我就不赘述了,有详细的文档可以看,但是有几个开发过程中的困扰我还是要说一下。

学习资源

有图有真相

tieshou wang

Read more posts by this author.

Subscribe to 王铁手的博客

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!