React Native学习01 - 在Mac平台上搭建iOS开发环境

最近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的入门文档

译注:我们更推荐使用WebStormSublime 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!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Story51314

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值