Mac配置React Native开发环境
一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错.
所以,以后学习自己要多动手.
现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native.
学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!!
下面记录下自己配置React Native开发环境:
1> 安装brew:
打开终端,输入: /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R whoami /usr/local
终端打印输出如下图:

看到RETURN字段了没,千万不要像我一样傻,还居然输入RETURN,然后回车...然后一直没有反应,其实------你按一下Enter即可.
接下来显示安装了,如下图,表示安装好了:

可以用一下命令查看是否安装成功:
brew -v
以下就是我的安装brew版本:

2>安装Node.js.
使用Homebrew来安装Node.js.
React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本,完全满足要求。
输入以下命令:
brew install node

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
4>推荐安装的工具
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
brew install watchman
5>Flow
Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。
brew install flow
6>测试安装
终端前往你工程要放置的目录输入命令安装,AwesomeProject为你的项目名可以自行修改.这个过程可能会挺长时间的…..科学上网很关键;
react-native init AwesomeProject

注意 : 这一步安装过程很慢,耐心等待哟!!!

7>下载完毕后前往该目录
cd myRaectNative
你也可以打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。
是不是记录的特别详细呀...嘿嘿,我这么笨都装好了,相信你肯定可以的啦...
Mac配置React Native开发环境的更多相关文章
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native 开发环境安装和配置使用报错: -bash: react-native: command not found
[React Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...
- 搭建基本的React Native开发环境
步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Home ...
- React Native开发 - 搭建React Native开发环境
移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
- 搭建React Native开发环境
搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- mac 配置Python集成开发环境
mac 配置Python集成开发环境(Eclipse +Python+Pydev) 1.下载Mac版64位的Eclipse. 进入到Eclipse官方网站的下载页面(http://www.eclips ...
- 【RN - 基础】之Windows下搭建React Native开发环境
前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...
- Mac电脑配置IOS React Native开发环境配置笔记
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...
随机推荐
- PAT乙级1038
题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805284092887040 题解一 这份代码最后一个点会超时 ...
- 《wifi加密破解论文》翻译介绍-wifi不再安全
前言 wifi的加密协议WPA2已经被破解,影响范围包括所有支持wifi的设备,包括Android,Linux,Apple,Windows,OpenBSD,联发科技,Linksys等.其中对Andro ...
- Redis五种数据结构(二)
Redis数据结构 Redis数据结构介绍 Redis是一种高级的key-value的存储系统,其中value支持五种数据类型. 字符串(String) 哈希(hash) 字符串列表(list) 字符 ...
- flutter 项目中打印原生安卓的log信息
因为项目的需要 在flutter 中调用安卓的方法 再用安卓的方法去调用c写的so包 方法 如果当前项目下面没有android stduio 自带的logcat 那就利用下面的方法 在安卓代码中引入 ...
- [转]Normal Map中的值, Tangent Space, 求算 Tangent 与 Binormal 与 TBN Matrix
原文出处 https://www.cnblogs.com/lookof/p/3509970.html - Normal Map中的值 - 有没有想过,Normal Map(法线贴图)为什么看上去都 ...
- 多个idea项目使用同一个tomcat
配置好tomcat后,每个项目使用不同的虚拟路径.并且把tomcat端口改为不一样的就可以了.
- luogu 2577 [ZJOI2005]午餐 贪心+dp
发现让 $b$ 更大的越靠前越优,然后依次决策将每个人分给哪个窗口. 令 $f[i][j]$ 表示考虑了前 $i$ 个人,且第一个窗口的总等待时间为 $j$ 的最小总时间. 然后转移一下就好了~ #i ...
- springboot(七).springboot整合jedis实现redis缓存
我们在使用springboot搭建微服务的时候,在很多时候还是需要redis的高速缓存来缓存一些数据,存储一些高频率访问的数据,如果直接使用redis的话又比较麻烦,在这里,我们使用jedis来实现r ...
- UVA 10029 Edit Step Ladders ——(DAG求最长路)
题意:升序的给出一本若干个单词,每个单词都可删除一个字母,添加一个字母或者改变一个字母,如果任意一个操作以后能变成另外一个字典中的单词,那么就连一条有向边,求最长的长度. 分析:DAG的最长路和最短路 ...
- Java编程思想代码环境配置
官方代码网站已更改 https://github.com/BruceEckel/TIJ4-code 如果导入到IntelliJ中 方法1 在IntelliJ中新建一个Java项目将TIJ4-code- ...

