最近React Native技术比较火,React Native是Facebook发布的一个开源框架(Github地址),据我所知携程的APP就是使用React Native开发,且携程的技术团队还专门出了一本关于React Native的书
确实React Native相比于HTML5性能更好,相比于原生iOS更灵活。
本人从React Native官网开始零基础学习React Native,并时时记录自己的学习成果及心得,并分享给大家。
Let’s get started!
下面我们从基本的基本开始入手,在Mac平台上搭建iOS开发环境(关于其他平台的大家可以去官网看)
一、在Mac平台上搭建iOS-React Native开发环境
1.安装HomeBrew
Homebrew,我们可以把它理解为终端上的AppStore,我们可以通过在终端敲一些命令就可以安装应用,且速度相对于AppStore要快
关于Homebrew的配置可以看少数派的一篇文章
《借助 Homebrew Cask,教你快速下载安装 Mac App 新姿势》
2.安装Node.js
(1)我们可以使用homebrew来安装Node.js
在终端下直接敲入以下命令
$brew install node
(2)我们也可以直接去官网下载Node.js点击安装
官网地址:https://nodejs.org/en/
下载时最好下载最新版本
3.React Native的命令行工具(react-native-cli)
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
$npm install -g react-native-cli
按官网的意思
如果你看到EACCES: permission denied
这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:(我是没有遇到过)
$sudo chown -R `whoami` /usr/local
到了这里,基本的环境已经算搭建完成了,我们可以开始编写我们的第一个ReactNative项目
下面4-6是推荐的工具,可以帮助我们更好的开发,你可以跟着步骤操作,也可以直接跳过,从7开始
推荐安装的工具
4.Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
$brew install watchman
5.Flow
Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。
$brew install flow
6.Nuclide
Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和调试React Native应用。
点击这里阅读Nuclide的入门文档。
译注:我们更推荐使用WebStorm或Sublime Text来编写React Native应用。
本人也比较偏好Sublime Text工具
7.测试安装
$react-native init AwesomeProject
$cd AwesomeProject
$react-native run-ios
8.修改项目
现在我们已经成功运行了项目,我们可以开始尝试动手改一改了:
用Sublime Text
打开index.ios.js
并随便改上几行。
在iOS Simulator中按下⌘-R就可以刷新APP并看到你的最新修改!
9.以上过程中可能遇到的问题
(1)如果你遇到类似于以下的问题
Warning: You are using OS X 10.12.
We do not provide support for this pre-release version.
You may encounter build failures or other breakages.
Please create pull-requests instead of filing issues.
我猜你肯定是和我一样,安装了最新版的macOS Sierra Beta版系统,后来我是在我的另外一台OS X EI Capitan电脑上配置成功。大家如果手头只有一台电脑,可以参考以下教程,进行系统降级
《macOS Sierra 公测版升级和降级教程》
(2)如果大家在用终端安装Node.js时,下载一直到不了100%,建议大家去官网直接下载安装包安装
Study React Native With Me!