ReactNative开发环境搭建过程及遇到的问题

必须的软件：

Chocolatey windows用来管理安装包的（下载，配置，卸载）

这里是用来下载开发需要的环境工具的。

注意：安装Chocolatey需要PowerShell，如果没有需要下载和配置环境变量。

在安装有PowerShell的windows系统，cmd中执行以下命令即可安装：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

出现如上界面表示安装完成，验证完成在命令行中，输入choco如果出现版本号即表示安装完成。

注意：可能下面这些文件使用choco下载失败，解决方案可以直接到官网下载msi文件安装即可。

Python2

安装命令： choco install python2

NodeJS

安装命令： choco install nodejs. install

（Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。）

<

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

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

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

淘宝 npm 地址：  http://npm.taobao.org/

如何使用 

有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：

1.临时使用

npm --registry https://registry.npm.taobao.org install express

2.持久使用

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功 

npm config get registry

或 

npm info express

3.通过cnpm使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 

cnpm install express

>

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 --globalyarn config set disturl https://npm.taobao.org/dist --global

如果你遇到EACCES: permission denied权限错误，可以尝试运行下面的命令（限linux系统）： sudo npm install -g yarn react-native-cli.

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

注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。

AndroidStudio

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

**除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了  Android Support Repository ，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）**

推荐安装：

genymotion安卓模拟器

这个模拟器需要VirturalBox支持。

异常：在安装时出现VirtualBox 启动时出现获取 com 对象失败，程序中断。

解决办法：在注册表里面进行修改

HKEY_CLASSES_ROOT\CLSID\{00020420-0000-0000-C000-000000000046}

InprocServer32 修改为C:\Windows\system32\oleaut32.dll

HKEY_CLASSES_ROOT\CLSID\{00020424-0000-0000-C000-000000000046}

InprocServer32 修改为C:\Windows\system32\oleaut32.dll

最后构建第一个App

使用npm安装create-react-native-app，命令：

npm install -g create-react-native-app。

使用下面的代码创建一个新的ReactNative工程并调用工程 AwesomeProject：

create-react-native-app AwesomeProjectcd AwesomeProjectnpm start

执行上面命令后会开启一个开发服务，并且打印一个QR码（二维码）。

运行ReactNative app：

在IOS和Android设备上安装Expo客户端（ https://expo.io/ ）并且要和电脑连接在同样的无线网络，使用Expo客户端扫描终端上的二维码就可打开工程。

修改app:

打开App.js,使用文本编辑器编辑某一行，保存后相应的页应该也会重载。

如此，开发环境就此搭好！