步骤如下:

1、安装HomeBrew,命令如下:

在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

等待安装成功后验证一下brew的版本:$ brew -v

2、安装Nodejs

进入 https://nodejs.org/en/download/ 选择Mac的版本下载(node-v8.9.1.pkg),并且安装好。 
验证Nodejs是否安装成功,在终端输入命令:$ node -v

3、安装WatchMan检测bug

$ brew install watchman

如果输入上面的命令报如下,就按照提示安装好command line tools然后重新执行安装watchman的命令就可以了

验证watchman是否安装成功,命令如下:watchman -v

4、安装Flow(JavaScript的静态类型检查器,方便找出类型错误问题),命令如下:

$ brew install flow

5、安装React Native

$ sudo npm install -g react-native-cli

6、创建demo,cd到存放项目的目标文件夹里,然后执行命令:

// ReactNativeDemo是demo项目的名字

$ react-native init ReactNativeDemo

等待片刻,当看到以下提示信息就成功了。

To run your app on iOS:
cd /Users/Jerry.Yao/Documents/My/Project/ReactNative/ReactNativeDemo
react-native run-ios
- or -
Open ios/ReactNativeDemo.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/Jerry.Yao/Documents/My/Project/ReactNative/ReactNativeDemo
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android

7、在目标文件夹里就生成了一个ReactNative的demo项目

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错:

前提是安装homebrew,node.js ,npm ,watchman,flow都成功。

执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found

报错提示:Please include the following file with any support request:  /Users/ewu/npm-debug.log,就是npm-debug.log这个文件有权限,

解决方法

加上sudo(root 权限)再执行命令:

sudo npm install -g react-native-cli

回车提示输入电脑密码,再回车,成功后再创建项目即可。

搭建基本的React Native开发环境的更多相关文章

  1. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

  2. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  3. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  4. React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

    [React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...

  5. Mac配置React Native开发环境

    一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提 ...

  6. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

  7. 在Mac上搭建React Native开发环境

    概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...

  8. [转] 在Mac上搭建React Native开发环境

    原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述 前面我们介绍过在window环境下开发React Native ...

  9. 【RN - 基础】之Windows下搭建React Native开发环境

    前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...

随机推荐

  1. 【学习笔记】HTML基础:使用html制作网页

    一.初识HTML 1.什么是HTML? Hyper Text Markup Language(超文本标记语言) 扩展XML:Extendsible  Markup Language(可扩展性标记语言) ...

  2. 探寻hashmap

    Hashmap源码 1.  构造器: a)获得默认数组大小:1>>4 :16 b) 获得负载因子:0.75:衡量hashmap的空间使用程度 i.过大:使用空间更加充分,但是查找效率变低, ...

  3. 译:面试投行的20个Java问题

    原文链接:https://dzone.com/articles/var-work-in-progress 作者:Anghel Leonard 译者:沈歌 如果你需要准备面试,可以看一下这篇博客中20个 ...

  4. Spring-boot2.0.1.BUILD-SNAPSHOT整合Elasticsearch报failed to load elasticsearch nodes错误解决办法

    spring-boot整合es的application.properties的默认配置为: spring.data.elasticsearch.cluster-nodes=localhost:9200 ...

  5. SQL注入和XSS攻击的原理

    8.4 Web跨站脚本攻击 8.4.1  跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...

  6. ArcMap没有工具条和菜单栏的解决方法

    问题: 在安装ArcGIS10后,打开竟然没有菜单栏和工具栏,安装10.1又有,卸了重装10还是没有 解决办法: 在ArcMap的状态栏上双击,在弹出的自定义对话框中,在Toolbars工具栏选择Ma ...

  7. ArcGIS Enterprise 10.5.1 静默安装部署记录(Centos 7.2 minimal)- 6、总结

    安装小结 安装完成后,首先我们需要将Datastore托管给Server,再将Server托管给Portal以此来完成整个单机版Enterprise 部署流程.为了测试流程是否正确,我们可以采用上传一 ...

  8. Python学习系列----第五章 模块

    5.1 如何引入模块 在Python中用关键字import来引入某个模块,比如要引用模块math,就可以在文件最开始的地方用import math来引入.在调用math模块中的函数时,必须这样引用: ...

  9. asyncio标准库2 Hello Clock

    如何调度协程,并发运行 asyncio.gather方法可以聚合协程or future def gather(*coros_or_futures, loop=None, return_exceptio ...

  10. Excel数据导入Sql Server,部分数字为Null

    在Excel中,我们时常会碰到这样的字段(最常见的就是电话号码),即有纯数字的(如没有带区号的电话号码),又有数字和其它字符混合 (如“区号-电 话号码”)的数据,在导入SQLServer过程中,会发 ...