步骤如下:

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. Maven之依赖关系

    在maven的管理体系中,各个项目组成了一个复杂的关系网,但是每个项目都是平等的,是个没有贵贱高低,众生平等的世界,全球每个项目从理论上来说都可以相互依赖.就是说,你跟开发Spring的大牛们平起平坐 ...

  2. asp: AJAX Database

    <% @LANGUAGE="VBSCRIPT" CODEPAGE="65001" %> <!DOCTYPE html PUBLIC " ...

  3. Recsys2018 music recomendation

    http://www.recsyschallenge.com/2018/ January 2018 Release of the "One Million Playlists" d ...

  4. 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色

    简介 在简单恢复模式下,日志文件的作用仅仅是保证了SQL Server事务的ACID属性.并不承担具体的恢复数据的角色.正如”简单”这个词的字面意思一样,数据的备份和恢复仅仅是依赖于手动备份和恢复.在 ...

  5. java中什么是上下文(servletContext)

    找了很多大佬的博客,看了之后还不是很清楚上下文到底是怎么回事,我个人理解 所谓上下文,它是用来存储系统的一些初始化信息,例如在jboss中通过配置文件指定了数据源,那么在jboss启动的时候就把这个文 ...

  6. Class.forName(),classloader.loadclass用法详解

    为什么要把ClassLoader.loadClass(String name)和Class.forName(String name)进行比较呢,因为他们都能在运行时对任意一个类,都能够知道该类的所有属 ...

  7. 深度搜索C语言伪代码

    bool DFS(Node n, int d){ if (d == 4){//路径长度为返回true,表示此次搜索有解 return true; } for (Node nextNode in n){ ...

  8. 一个C#面试问题,要求是将字符串中重复字符从第二个开始都去掉,空格除外。然后显示的时候,从后往前显示。

    因为C#的code,感觉实现这个还是比较容易,只是SB.所以,在面试时候,以为不会这么容易,所以,我先试着用了Dictionary去实现,发现有困难.然后改回来用StringBuilder实现,这个因 ...

  9. Django问卷调查项目思路流程

    Django问卷调查项目思路流程: 1 后端思路 : 需求分析 ---- 找出各实体对应关系 ---- 设计model架构 ---- 统一资源封装 --- 提供资源API入口 ---- 设计项目实体功 ...

  10. static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; // aka 16

    查看HashMap源码,发现这个static final int DEFAULT_INITIAL_CAPACITY = 1 << 4;  值为16. 这个是位移算法. 例如: 4<& ...