iOS开发之React Native

737 查看

  • React Native一经推出,就获得众多开发者的关注。她使得 JavaScript 能够开发真正的 APP, 它不仅有着与原生应用相媲美的体验,同时拥有着 web 应用的优势和开发效率。
  • React Native 鲜明的特点就是组件化,一个应用都是多个组件构成;同时为了更高的效率,React Native 采用了内存 Dom tree Diff 计算,优化了 view 的渲染效率和体验。使用 JavaScript 开发跨终端的应用是未来的趋势。
  • 然而尽管如此,一开始我依旧是拒绝的,毕竟原生的OC和Swift这套开发工具用的更顺手一些,但作为一个程序员最基本的准则就是拥抱变化,所以今天就来简单谈谈React Native的基本入门。

一. 环境配置

点击这里查看官方安装文档

  • OSX & Xcode自然是最基本的
  • 推荐使用Homebrew 来安装Watchman和Flow
  • 安装Node.js 4.0或更高版本(译注:如果你并不使用Node.js开发网站,只是用于React Native的开发,那么请先安装homebrew,然后直接使用brew install node 安装即可,不必按照下面的nvm的安装步骤)
    • 安装 nvm(安装向导在这里)。然后运行nvm install node && nvm alias default node,这将会默认安装最新版本的Node.js并且设置好命令行的环境变量,这样你可以输入node
      命令来启动Node.js环境。nvm使你可以同时安装多个版本的Node.js,并且在这些版本之间轻松切换。
    • 如果你从未接触过npm,推荐阅读npm的文档
  • 在命令行中输入brew install watchman,推荐安装watchman,否则你可能会遇到一个Node.js监视文件系统的BUG。
  • 如果你希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow 来安装flow。

二. 快速上手

  • 下载官方事例代码,在终端进行以下两个操作:

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

  • 然而由于一些你懂得的原因,react-native命令行从npm官方源拖代码时会遇上麻烦,因此最好将npm仓库源替换为淘宝镜像:

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

  • 下面就可以打开AwesomeProject工程,双击xcodeproj,运行项目,首次运行时间略久,如果出现以下画面,说明你已经成功了一半了:


  • 然后打开项目中index.ios.js,随意修改文本属性(在此不做赘述),查看效果:


  • 事例代码采用了ES6语法,关于ES6语言推荐阮一峰老师的书

未完待续...