ReactNative项目环境搭建

ReactNative项目环境搭建

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

项目地址:ReactNative豆瓣电影

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

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

ReactNative项目环境的搭建需要

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

基本开发环境

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

这里简述一下步骤:

Chocolatey安装

Chocolatey是一个 Windows 上的包管理器,类似于 linux 上的yumapt-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、这里遇到了这样一堆错误

1
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 APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel 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环境配置好之后,我又去测试了下,测试命令

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

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

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

android驱动管理

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

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

手机设备的设置

启用开发者模式

这里拿我的小米手机举例

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

cmd命令行输入命令检测下

1
adb devices

这是后命令行给到的结果就能显示成功连接了,下面再进行安卓环境初始化和打包安装到手机就可以成功了

1
react-native init douban

安装成功

这时候发现手机上多了一个叫douban的应用

doubanApp

回去node后台看看

这个窗口,就是React Native Packager 是帮我们实时编译项目源代码的,并把编译结果应用到手机上,可以让开发者随时查看最新的项目代码效果。

ReactNative-Packager

打开手机上刚安装的应用看看

douban

就显示Welcome to React Native,这样就可以通过App.js入口文件进行开发和调试了

在手机上查看代码

Welcome to React Native界面常按左下角的菜单键,会弹出下图

在手机上查看代码

android环境支持包百度云链接

依赖包里有android环境依赖包、基本依赖包、vpn软件

链接:https://pan.baidu.com/s/1Oj2EUuuuNbKdQcoeUsc1AQ
提取码:tbo6

参照文档

搭建基本的开发环境 - 英文官网

搭建基本的开发环境 - 中文

本文标题:ReactNative项目环境搭建

文章作者:王工头

发布时间:2019年01月08日 - 19:53:52

最后更新:2019年01月26日 - 15:45:20

原始链接:https://qqqww.com/ReactNative项目环境搭建/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------