2

去年年初写了一个 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 应用运行起来了。

前方高能

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

Navigator,这个东西对新手来说稍微有点复杂,文档也看不大明白,我是看了新手理解Navigator的教程

jsdom-jscore,这个是用来解析 DOM 的,但是作者好像不维护了,就烂尾了,还好有个哥们 fork 了一份并做了一些修复,在他的基础上,我终于装好了这个插件。

使用链接库

在设备上运行

用 Chrome 来断点调试 地址 http://localhost:8081/debugger-ui

学习资源

51 ReactNative Examples

https://facebook.github.io/react-native/

https://github.com/soliury/noder-react-native

图图图


王铁手
4.1k 声望279 粉丝

怀着一颗铁匠的心,凭借一双铁手,打造自己的人生。