前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native 环境搭建和创建项目(Mac)

React Native 环境搭建和创建项目(Mac)

作者头像
IT架构圈
发布2018-06-01 10:39:57
1.8K0
发布2018-06-01 10:39:57
举报
文章被收录于专栏:IT架构圈IT架构圈

搭建基本环境(必要)

使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm,也可以有选择的使用watchman 、Flow。

1. 安装Homebrew

Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件。 Home-brew 的使用方式: 1)搜索软件:brew search 软件名,如brew search wget 2)安装软件:brew install 软件名,如brew install wget 3)卸载软件:brew remove 软件名,如brew remove wget

打开终端,运行以下语句(中间需要输入密码)进行安装:

代码语言:javascript
复制
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

运行效果如下:

Homebrew安装.png

可通过如下语句查看安装是否成功以及安装的Homebrew版本:

代码语言:javascript
复制
brew -v

正常情况下均可安装成功,若出现网络问题安装失败,则运行如下语句清理后再重新安装:

代码语言:javascript
复制
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 使用Homebrew来安装Node.js

React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本,完全满足要求。

终端运行语句如下:

代码语言:javascript
复制
brew install node

运行效果如下:

安装Node.js.png

3. 安装React Native的命令行工具(react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

终端运行语句如下:

代码语言:javascript
复制
npm install -g react-native-cli

运行效果如下:

安装react-native-cli.png

若出现错误(可能由于权限不足),则实用以下语句进行安装:

代码语言:javascript
复制
sudo npm install -g react-native-cli

补充:(由于国内网络问题,可以将npm仓库替换为国内镜像)

代码语言:javascript
复制
//将npm仓库替换为国内镜像:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4. Xcode

iOS 开发这个最基础的,应该一般有安装,,没有的话只推荐在App Store直接搜索安装。

(二) 推荐安装的工具

1. Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

终端运行语句安装:

代码语言:javascript
复制
brew install watchman

运行效果如下:

安装 Watchman.png

2. Flow

Flow是一个静态的JS类型检查工具,可方便找出代码中可能存在的类型错误。 译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。

终端运行语句安装:

代码语言:javascript
复制
brew install flow

运行效果如下:

安装Flow.png

3. React Native开发之IDE

可以直接用自己喜欢的编辑器进行编辑。 React Native官方推荐了三种IDE编写React Native应用: 1)Atom和Nuclide 2)WebStorm 3)Sublime Text 4) VSCode+React Native Tools 更近一步的了解和使用参考我一起写的另一篇文章哈哈: React Native 开发之IDE

(三) 创建第一个项目

1. 初始化创建项目

命令行创建项目:

代码语言:javascript
复制
react-native init AwesomeProject --version 0.44.3

运行截图如下:

react-native init AwesomeProject.png

这里可能会是个漫长的等待过程,可能由于项目依赖包本身就很庞大,让后下载速度比较慢。总之我半夜做的尝试,为了写文章截图哈哈,安心去看了一集异世界的动漫,然后回来就发现创建项目成功了哈。。(ps:之前在另一部电脑就试过创建项目活着集成原生的时候执行这个命令,不过等得不耐烦就又ca掉它了,,可能真的需要耐心哈哈) 创建成功则如下:

创建成功截图.png

生成项目文件集.png

2. 运行项目

命令行运行项目

代码语言:javascript
复制
//  视情况而定,总之进入项目根目录
cd AwesomeProject

//  运行iOS项目
react-native run-ios

接下来就是一连串反应,截图如下,成功运行项目:

弹出运行服务窗口.png

虚拟机运行成功截图.png

补充: 若是调试安卓版本:(需要安装好安卓SDK、配置环境等)

代码语言:javascript
复制
//  运行安卓项目
react-native run-android

3. 除了命令行运行,也可直接像iOS原生那样运行

方法一:Nuclide中打开AwesomeProject文件夹,然后运行 方法二:双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。(最常用,对iOS开发者)

之后无论是从Xcode中启动还是直接npm install都会爆出一个相同的bug:

代码语言:javascript
复制
Error watching file for changes: EMFILE
{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}Error: Error watching file for changes: EMFILE
    at exports._errnoException (util.js:1008:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)

升级最新MacOS系统后,需要重新安装一次brew install watchman

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-03-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 搭建基本环境(必要)
  • 1. 安装Homebrew
  • 2. 使用Homebrew来安装Node.js
  • 3. 安装React Native的命令行工具(react-native-cli)
  • 4. Xcode
  • (二) 推荐安装的工具
    • 1. Watchman
      • 2. Flow
        • 3. React Native开发之IDE
          • 1. 初始化创建项目
          • 2. 运行项目
          • 3. 除了命令行运行,也可直接像iOS原生那样运行
      • (三) 创建第一个项目
      相关产品与服务
      命令行工具
      腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档