ReactNative项目环境搭建-CSDN博客

本文链接：https://blog.csdn.net/weixin_43307658/article/details/88846271

ReactNative项目环境搭建

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

项目地址：ReactNative豆瓣电影

看到github中ReactNative豆瓣电影的项目, 打算做一个基本功能的练练手，然后就项目基本配置中就遇到了不少坑，这里总结一下流程和遇到的一些坑，万一再遇到了，还能再来看解决方案

说明：ReactNative的项目建议由React开发经验的看会事半功效

ReactNative项目环境的搭建需要：

android编译环境
手机设备能够正常连接电脑并通过adb devices指令测试连接正确
成功打包并安装到手机

基本开发环境

首先，我是按照React Native中文网的方法，一步一步安装的，但并不成功，（错误信息大概描述的是android develepment or device安卓或者手机设备的问题，后面还有个fail connection连接失败）, 所以配合下面的android环境搭建和手机设备正确连接之后才成功，但是这些步骤在后续的环境搭建过程中肯定是有用到的

这里简述一下步骤：

Chocolatey安装

Chocolatey是一个 Windows 上的包管理器，类似于 linux 上的yum和 apt-get。你可以在其官方网站上查看具体的使用说明。一般的命令行安装步骤应该是下面这样：

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

一般来说，使用 Chocolatey 来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。译注：chocolatey 的网站可能在国内访问困难，导致上述安装命令无法正常完成。请使用稳定的翻墙工具。如果你实在装不上这个工具，也不要紧。下面所需的 python2 和 nodejs 你可以分别单独去对应的官方网站下载安装即可。

Python 2安装

打开命令提示符窗口，使用 Chocolatey 来安装 Python 2.

1	choco install python2

Node安装

打开命令提示符窗口，使用 Chocolatey 来安装 NodeJS。注意，目前已知 Node 7.1 版本在 windows 上无法正常工作，请避开这个版本！

1	choco install nodejs.install

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

其实到这里我才知道为什么要安装另外一个包管理工具Chocolatey，原以为我安装过NodeJS的就不需要重新安装了（我以前使用cnpm安装的），但这个官方文档明显提到不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！所以我这里老老实实的又用choco指令安装了一遍Node

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

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

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

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

1	npm install -g yarn react-native-cli

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

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

这里是官方提示的一个错误：但我的安装过程中没有遇到，先放到这

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

android环境搭建(Android Studio)

1、这里是我是直接去官网下载的最新版Android Studio

下载下来就是这么个玩意：

android-studio

2、一看到exe文件，直接安装嘛，这里建议不要随意安装到其他目录（因为第一次我就安装到了我自定义的我的个人dev目录中，就后面各种错误，后来卸载，重新开始），按照他默认的走，还有之后需要下载的插件选项，尽量他默认打钩的，不要去掉，然后再加上我建议的就行了

3、记住以上的钩都要选上，初步安装过程结束后，选择Custom选项

custom

4、选择如下图的组件安装，都选上

sdk

5、这里遇到了这样一堆错误

Preparing "Install Android SDK Platform-Tools (revision: 28.0.0)".Downloading https://dl.google.com/android/repository/platform-tools_r28.0.0-windows.zip"Install Android SDK Platform-Tools (revision: 28.0.0)" ready.Installing Android SDK Platform-Tools in D:\Android\sdk\platform-tools"Install Android SDK Platform-Tools (revision: 28.0.0)" complete."Install Android SDK Platform-Tools (revision: 28.0.0)" finished.Preparing "Install Android Support Repository (revision: 47.0.0)".Downloading https://dl.google.com/android/repository/android_m2repository_r47.zipjava.io.IOException: Cannot download 'https://dl.google.com/android/repository/android_m2repository_r47.zip': SSL peer shut down incorrectly, response: 200 OKWarning: An error occurred while preparing SDK package Android Support Repository: Cannot download 'https://dl.google.com/android/repository/android_m2repository_r47.zip': SSL peer shut down incorrectly, response: 200 OK."Install Android Support Repository (revision: 47.0.0)" failed.Preparing "Install Android SDK Tools (revision: 26.1.1)".Downloading https://dl.google.com/android/repository/sdk-tools-windows-4333796.zipjava.io.IOException: Cannot download 'https://dl.google.com/android/repository/sdk-tools-windows-4333796.zip': Read timed out, response: 200 OKWarning: An error occurred while preparing SDK package Android SDK Tools: Cannot download 'https://dl.google.com/android/repository/sdk-tools-windows-4333796.zip': Read timed out, response: 200 OK."Install Android SDK Tools (revision: 26.1.1)" failed.Preparing "Install SDK Patch Applier v4 (revision: 1)".Downloading https://dl.google.com/android/repository/3534162-studio.sdk-patcher.zip.bakjava.io.IOException: Cannot download

没复制全，就大概讲的是插件安装失败，主要错误原因就是外国网站被墙或者网速实在太渣,为什么这样讲呢？因为我去网上查，都说是被墙，但我很确认我已经翻墙了啊，而且后面安装插件的过程中，一直重试，发现有些能成功，有些不能成功（这里要多看日志），所以我断定是网络过慢原因了，多重试，而且一定要开vpn

6、安装过程中，有一个选择主题的环节，一个白色的，一个黑色的，随便选一个，主题嘛，看着顺眼就行

下面就可以一直默认安装到最后有一个让你运行Android Studio ，然后直接运行，会到Android Studio的欢迎界面 ，它的有下角有个Configure, Configure下面有个SDK Manager,点击进去

configure

7、在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。这里遇到和6同样的问题，先看下面的第8步再apply

platforms

8、在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.这里也遇到和6同样的问题

tools

解决办法：两个

办法一：开VPN，我这里用的蓝灯

办法二：可以直接迅雷加速下载包到本地，然后一个一个放入该放的文件夹中，这里可以参考文档手动安装配置Android Studio，在本文后面我会把这里所需要的插件一整套，全部整理上传到我的百度云，这样从我的百度云下载应该就好多了，然后再参考前面的手动安装配置Android Studio文档手动配置也可以的

下面会有android环境依赖包、基本依赖包、vpn软件一整套的百度云链接

到这一步，Android Studio环境基本就配置好了

手机驱动安装

手机驱动查看和安装

这里要把手机连接到电脑上

前面android环境配置好之后，我又去测试了下，测试命令

// 初始化一个安卓仓库
react-native init douban
// 安装app到手机上
react-native run-android

但是又发现报了一个错误设备不能连接或者是android环境问题

然后这里我去我的电脑=>管理=>设备管理器查看了下

android驱动管理

我这里用驱动人生更新过了，所以红框中看起来一切正常，遇到设备问题一定要去电脑的驱动管理看看，看带!号的或者带?号的相关驱动去给更新下

到了这一步，然后我再来测试

手机设备的设置

启用开发者模式

这里拿我的小米手机举例

你的手机=>设置=>我的设备或者我的手机=>全部参数=>MIUI版本（其他手机找版本号就对了）=>莲须点十几下基本上这时候就显示你已经处于开发者模式了
返回设置=>更多设置=>开发者选项=>打开开发者选项和USB调试和USB安装和USB调试（安全设置）
由于到了这一步也翻了不少文档，我又多学了一条测试手机设备连接的指令