React Native mac环境搭建

一、React Native 简介

2015年3月26日，FaceBook公司对外正式发布了React Native ——使用React框架跨平台开发原生移动应用的开源技术框架（简称RN）。开发者可以使用RN高效的开发运行与Android与iOS操作系统的应用程序。他的设计理念是：使用React Native 开发，既拥有Native良好的人机交互体验，又保留了React框架的开发效率。

React、 React.js 和 React Native

React框架是Facebook从2012年以来慢慢发展起来的一套开发框架。在这套框架上诞生了React.js用来进行网页开发，以及React Native用来进行手机App开发。他们三者的关系是React是基础框架，是一套基础设计实现理念，开发者不能直接用其来开发网页或者移动应用。在他的基础上发展处了React.js来开发网页，React Native来开发移动应用。React.js开发效率比起传统的HTML网页编写要高出非常多，所以React Native的开发效率相信大家很快就会体验到。

二、React Native 开发特点

1.一次学习，随处编写

在iOS和Android上一份代码支持两个操作系统历史证明是很困难的。RN提出了“Learn once，write anywhere”。其根据不同的平台上代码会有一些微小的区别，但开发思路是相同的。RN没有狂妄的喊出“Write once，run anywhere”这样的口号但是在移动开发应用iOS和Android两大平台上差不多已经做到了这一点。

2.混合开发

混合开发是RN的另一个重要特性。具体的体现在以下几点：

1.通用的UI界面与业务逻辑有React Native开发，但与手机平台紧密关联的处理由原生代码来执行。

2.将原来使用原生代码实现的UI小部件包装成React Native的自定义组件。

3.应用界面在React Native开发的界面与原生代码开发的界面切换（双向通信，无缝衔接）。

3.高效的移动开发

绝大部分的UI界面与业务逻辑都是一套代码，其比原生语言更加快捷高效，相对于两个平台各开发一套应用其能节省50%甚至更多的工作量。具体优势体现在一下4个方面：

1.独特的UI实现框架

2.组件化开发

3.跨平台移植代码迅速

4.自动匹配不同屏幕大小的手机

4.高效的移动应用开发调试

原生代码修改后需要重新编译构建，才能展示修改后的效果。RN修改代码后可以立刻看到效果省去了编译构建的时间，同时所有代码可以一直到Chrome里面运行，断点调试、单步调试、调用栈追踪这些常用的调试方法。

5.灵活高效的应用热更新

自JSPatch被拒后，RN的热更新优势重要，每次热更新需要下载的数据量在200KB~1M这个量级，同时其数据下载不到市场应用下载的十分之一并且可以在用户无感知的情况下加入新界面、新功能与新逻辑。最重要的一点是这种热更新行为是苹果官方允许的，无需担心被拒风险。目前热更新有两种方案：pushy 和 codepush(微软提供)这两种方案会在后续文章具体介绍。

6.有效降低移动应用安装包的体积

打个不是很恰当的比方，活字应刷印刷一篇文章建模排版所需的时间是大于手抄的但是如果是百张千张呢。RN的特点是功能越复杂，包越大（大约大于15M），RN包比原生代码小的多。

7.开发软硬件要求低门槛低

其是基于ES 6（ECMAScript 2015 就是JavaScript），其函数名、变量名都是采用自然语言的命名方法。

开发模式类似于积木式开发。

RN对硬件的要求不高，支持mac、windows等多平台开发。下面环境搭建有说明。

8.使用React Native 开发的代价

1.内存消耗大

开发模式下运行“Holle World”比原生大20兆内存，当然Release模式会有所减少很多与原生“Holle World”相差不大。目前市面上的手机配置基本可以忽略内存的影响。

2.运行速度

毕竟原生才是本土，大牛写的原生肯定比RN速度略快，但是一般的开发者开发的功能是与RN速度相差不大的。

RN开发的代码运行速度可以通过两方面来弥补。

一、网络请求，RN代码实现速度稍慢但是用户感觉不出来是毫秒级别的，因此不需要优化。

二、核心功能，那就用源代码开发就好了，上面说了RN一大特点就是混合开发。

三、React Native Mac环境搭建

首先mac电脑配置比较高内存比较大的朋友们建议安装安卓环境（这样可以两端调试）。

1.安装Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

打开终端输入以下代码：

/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

在此过程中会要求输入电脑密码输入后请耐心等待，直到出现“Installation successful!”。

2.安装Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。终端输入以下命令：

brew install node

目前最新的版本是9.5.0.

安装完node后建议设置npm镜像以加速后面的过程。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.安装Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权。

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

4.安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。译注：此工具官方虽然是推荐安装，但在实践中，我们认为此工具是必须安装，否则可能无法正常开发。

brew install watchman

5.Flow 和 Nuclide仅作介绍想安装的可以试试

Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

Nuclide是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和调试React Native应用。点击这里阅读Nuclide的入门文档。

6.推荐的开发环境

考虑到实用性不推荐使用Nuclide，而推荐使用WebStorm或Sublime Text或Visual Studio Code来编写React Native应用。所有这些开发工具都是跨平台的。其中webstorm是收费的，体量较大，功能较多，基本无需配置。其他工具免费，相对轻量，但或多或少需要下载插件和配置。

本人出生.net所以比较倾向于vs code，有钱的可以去用WebStorm功能强大，但是其安装包安装后占空间太大了，启动等待时间也比较长（对于我们这些内存严重不足的是不考虑的）。Sublime Text 是拥有漂亮的用户界面和强大的功能的轻量级编辑器（收费的但是可以无限期试用闹心不）。下面主要介绍下Visual Studio Code。

VS Code是一款免费（就他是真正意义上的免费）开源的现代化轻量级代码编辑器，几乎支持所有的主流开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。跨平台软件支持Win、Mac以及Linux。因为其为轻量级编辑器，所以体积小，运行流畅。VS Code已经针对RN做了适配工作所以直接下载就可以用了。官方地址为https://code.visualstudio.com/。

7.0.45以上版本新增编译器安装（如果运行0.45以下版本忽略此条）

init命令默认会创建最新的版本，而目前最新的0.45及以上版本需要下载boost等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目！！！。如果你嫌麻烦，又没有对新版本的需求，那么可以暂时创建0.44.3的版本。

提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

如果想体验最新版本可以按如下步骤操作：

1.进入git页面找到点击Branch选定指定版本：https://github.com/facebook/react-native

2.找到script文件夹并且打开

3.找到文档中说明要配置的第三方

4.由于国家政策这些第三方需要翻墙下还不一定下得下来所以这边提供下载好了的百度盘：http://pan.baidu.com/s/1kVDUAZ9 在这里下载你选中版本需要的依赖就可以了。

5.第三方依赖放置目录

下下来后请放置到 ~/.rncache 根目录或者输入终端命令操作：如果对终端命令不熟悉可以参照这篇文章

cd ~ //进入根目录
mkdir .rncache //创建第三方依赖库隐藏文件夹
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ //复制库到指定文件夹路径视文件实际路径来定按照这句代码将所需的文件都copy进来
open .rncache //打卡文件夹查看文件是否全部复制进去或者省略上面的步骤直接打开此文件夹将文件拖进来方法很多

注：小知识点想要查看隐藏文件按住Shift + command + . 就可以了再按就是消失。

8.创建工程

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

创建成功后终端会弹出一个界面用来展示代码情况。

提示：如果run-ios无法正常运行，请使用Xcode运行来查看具体错误（run-ios的报错没有任何具体信息）。

9.修改项目

使用你喜欢的编辑器打开App.js并随便改上几行。

在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改！

如果你成功了将会出现类似以下界面：

10.恭喜完成RN第一个程序！

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/asuno_1/article/details/80527697
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 21:55:11
阅读 ( 2213 )
分类：Go环境配置