这里记录一下在Mac系统下搭建React Native开发环境的过程:

  1. 安装HomeBrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  安装完后如下所示:

  \

  可使用命令:”brew -v“查看其版本。

  2. 安装Node.JS: brew install node,也可以在node.js官网下载pkg安装包进行安装。

  

  3. 安装React Native的命令行工具:(需要sudo来安装,有些目录需要高级权限)

  

  4. 安装Watchman,它是由Facebook提供的监视文件系统变更的工具。(下面两个工具推荐安装)

brew install watchman

  5. 安装Flow,它是一个静态的JS类型检查工具,可方便找出代码中可能存在的类型错误。

brew install flow

  6. 接下来就可以创建项目了:

  

  出现这个错误,需要检查一下node版本,需要4.0以上。(之前的node使用了系统原来的--v0.4.1,这里修改PATH环境变量,指向我们安装的。)    

  再次运行,出现如下错误:

  

  安装nvm:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

  

  安装cnpm:

sudo npm install cnpm -g

  安装invariant:

npm install invariant -g

  再次运行:

  

  新建项目成功,看看目录结构:

  

  在新建项目成功后,react也告诉我们该怎么运行:react-native run-***。

  注意,使用小米手机,需要在开发者模式把"MIUI优化"关闭,否则,无法直接安装apk:

  

  现在进入项目根目录执行"react-native run-android",可以看到,rn服务器端首先被启动:

  

  然后从jenter下载必须的依赖包并开始编译:

  

  启动过程中输出:

  

  安装完后,手机截图如下:

  

  类似,也可以执行"react-native run-ios"来打开模拟器运行,或直接打开xcode项目来run。

  

Mac系统下React Native环境搭建的更多相关文章

  1. Mac系统下STF的环境搭建和运行

    本文参考以下文章整理:MAC 下 STF 的环境搭建和运行 一. 前言 STF,全称是Smartphone Test Farm,WEB 端批量移动设备管理控制工具,就是可以用浏览器来批量控制你的移动设 ...

  2. Ubuntu17.10 React Native 环境搭建

    React Native 环境搭建 环境:ubuntu17.10 安装依赖 必须安装的依赖有:Node.React Native 命令行工具以及 JDK 和 Andriod Studio. 安装nod ...

  3. 初学 React native | 环境搭建(在模拟器上运行)

    我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...

  4. Windows系统下Android开发环境搭建

    “工具善其事,必先利其器”.要想学好Android,搭建好Android开发环境是一个良好的开端. Windows系统下Android开发环境主要有4个大的步骤.分别是: 1.JDK的安装 2.ecl ...

  5. 一寸宕机一寸血,十万容器十万兵|Win10/Mac系统下基于Kubernetes(k8s)搭建Gunicorn+Flask高可用Web集群

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_185 2021年,君不言容器技术则已,欲言容器则必称Docker,毫无疑问,它是当今最流行的容器技术之一,但是当我们面对海量的镜像 ...

  6. React Native环境搭建(iOS、Mac)

    http://reactnative.cn/docs/0.42/getting-started.html#content 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装N ...

  7. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  8. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  9. 逻辑性最强的React Native环境搭建与调试

    React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用, ...

随机推荐

  1. 清北 Noip 2016 考前刷题冲刺济南班

    2016 10 29 周六 第一天 %%%,%ZHX大神 上午,60分, 下午,爆零orz 2016 10 30 周天 第二天 炒鸡倒霉的一天 %%%,%ZHX大神 据大神第一天的题最简单. 上午,和 ...

  2. 【原创】自己动手写工具----XSmartNote [Beta 1.0]

    一.背景 有个朋友是在他们单位的市场部,手里的策划文案以及PPT,少则数百,多则上千,多年下来也是一笔不可小觑的财富,每一次新的策划都可以从以往的文案或PPT中“拿来主义”,有着很好的借鉴意义,但是这 ...

  3. SQL语句/函数汇总

    1.CHARINDEX(短字符A,长字符B) 说明:返回A在B的位置,从1开始,若B中不存在A,则为0 例如: SELECT CHARINDEX('aaaa','abaaaacded')  ----- ...

  4. C++ cast

    excerpted from Type conversions K&R Section 2.7 p59 对type conversion 的解释: The precise meaning of ...

  5. TTTAttributedLabel 富文本小记

    - (void)setupTipsLabel:(TTTAttributedLabel *)label { UIColor *red = [UIColor mainColor]; UIColor *gr ...

  6. Jquery 小技巧

    [每个程序员都会的35个jQuery的小技巧]收集的35个jQuery的小技巧/代码片段,可以帮你快速开发

  7. my97中文乱码问题

    在使用my97日期插件后页面显示中文乱码问题: 解决方法: 把下面这段代码复盖到你的ZH-CN.js就解决了 var $lang={ errAlertMsg: "\u4E0D\u5408\u ...

  8. inline-block和float

    Inline-block: 1.使块元素在一行显示 2.使内联支持宽高 3.换行被解析 4.不设置宽度,宽度由内容撑开 5.在IE6/7下不支持块标签 Float: 1.使块元素在一行显示 2.使内联 ...

  9. android Viewpager HorizontalScrollView 实现分页栏拖拽

    源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果:  前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...

  10. 2. K线学习知识二

    1. K线 - 阳线 定义:阳线是证券市场上指收盘价高于开盘价的K线,K线图中用红线标注表示涨势. A:小阳星 全日中股价波动很小,开盘价与收盘价极其接近,收盘价略高于开盘价. 小阳星的出现,表明行情 ...