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语言推荐阮一峰老师的书。
未完待续...