一直觉得学习一样东西,不动手怎么也学不会,就像学习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开发环境的更多相关文章

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

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

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

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

  3. 搭建基本的React Native开发环境

    步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Home ...

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

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

  5. 搭建React Native开发环境

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

  6. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  7. mac 配置Python集成开发环境

    mac 配置Python集成开发环境(Eclipse +Python+Pydev) 1.下载Mac版64位的Eclipse. 进入到Eclipse官方网站的下载页面(http://www.eclips ...

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

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

  9. Mac电脑配置IOS React Native开发环境配置笔记

    React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...

随机推荐

  1. python打包工具distutils、setuptools的使用

    python中安装包的方式有很多种: 源码包:python setup.py install 在线安装:pip install 包名(linux) / easy_install 包名(window) ...

  2. fiddler save files

    使用fiddler 保存访问到的文件 使用jscript Fiddler Script 是用JScript.NET语言写的 JScript.NET 此语言可以调用C# api 参考地址:http:// ...

  3. Oracle 11 安装 提示环境不满足最低要求解决方案

    在 Oracle 安装包 中,找到 stage 文件夹 切入,再找到 cvu 文件夹,找到 cvu_prereq.xml 文件 ,进行编辑 新增 这一块内容. <OPERATING_SYSTEM ...

  4. vim + oh-my-zsh + git搭建开发环境

    vim + oh-my-zsh + git配置开发环境 vim配置 安装vundle 使用vundle作为插件管理器,使用前先安装vundle mkdir -p ~/.vim/bundle git c ...

  5. BZOJ 4012 [HNOI2015]开店 (区间修改 永久化标记 主席树)

    讲得好啊 主席树区间修改了,每一次遇到整区间就打永久化标记(不下传,访问的时候沿路径上的标记算答案)然后returnreturnreturn,那么每修改一次只会访问到lognlognlogn个节点,再 ...

  6. 题解 [BZOJ4368][IOI2015]boxes纪念品盒

    题面 解析 可以发现,发纪念品有三种方式: 从左边走再原路返回. 从右边走再原路返回. 走一圈. 注意到,第三种走法最多只会走一次, 因为如果走了多次,那发放的物品数量就会>=\(2k\), 那 ...

  7. 内置对象:Math

    JavaScript内置函数Math.random()自定义封装函数:1,Math.floor(Math.random()*(b-a+1)+a)  随机生成a到b之间的整数. 也可以写成:Math.f ...

  8. THUWC2020 游记

    不知道标题该叫什么,那就叫游记吧.反正是来玩的. CSP-S 排到我省三十几名,也不知怎么就过了 THU 的初审. Day0 到了宾馆.和 cy 划了一晚上. 发现自己不会做这次月考数学题,丢人啊丢人 ...

  9. Mybatis resultMap和resultType的区别

    resultType和resultMap功能类似  ,都是返回对象信息  ,但是resultMap要更强大一些 ,可自定义.因为resultMap要配置一下,表和类的一一对应关系,所以说就算你的字段名 ...

  10. map(callback)将一组元素转换成其他数组(不论是否是元素数组)

    map(callback) 概述 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式.这都可以用'$.map()'来方便的建 ...