React Native入坑笔记——Window/Android版开发环境搭建

如果觉得排版不好可以到简书上看——>React Native入坑笔记——Window/Android版开发环境搭建

一、安装前说明事项

1.准备好科学上网工具——安装环境时使用(最好安装过程中全程使用)。

2.确定你的电脑所装的Windows操作系统是使用官方镜像的——不然安装过程中可能会遇到未知的错误,这一点可以先不用考虑,等到安装开发环境时遇到问题时在讨论。

3.本文参考了RN中文网搭建开发环境这篇文章,并在此基础上添加了我在配置中遇到的一些问题的说明及解决办法。

二、软件的安装

1.安装Chocolatey
1.1 cmd.exe(windows键+R,输入cmd回车),在命令行中执行以下命令进行安装 :
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin 
1.2 安装Chocolatey过程中可能会遇到的问题及解决方法

1.2.1 权限问题
若果安装过程中遇到关于用户权限不够的问题,如下图中所示:

 
权限不足


解决办法:进入C:\Windows\System32路径下找到cmd.exe,然后点击鼠标右键选择以管理员身份打开。

1.2.2 安装失败
提示该软件(Chocolatey)不能(不支持)安装在本系统上(大概就是这个意思,实际报错信息很长,没保存截图,所以放不了图了)。

解决办法:确认你是否已经打开科学上网工具,如果是网络问题,重新试一遍看看。如果不是,那么sorry啦,我也没有解决办法啦。不过我认为可能是你Windows系统装的是盗版的(非官方镜像文件安装的)——因为我用公司的电脑装的就是报错(严重怀疑公司系统不是正版的),我自己的电脑(最新的Windows10专业版)上装一点问题都没有。如果你最后解决不了这个问题,可以考虑重装系统。毕竟当关机解决不来问题的时候,那么重装系统未尝不是最好的解决方法啦(滑稽)!——当然若果你刚好遇到这个问题,并且解决了这个问题,十分欢迎分享你的经验。

2.安装Python2
2.1 在命令行(cmd同上,参见1.1)中执行以下命令进行安装:
choco install python2

2.1.1 关于Script安全策略改变的一些提示以及选择
提示脚本可能会威胁你的电脑,询问你是否改变脚本(Script)安全策略__(提示可能是英文的),然后让你选择Y/N,如下图:

 
改变脚本安全策略提示

解决办法:输入Y回车就可以了,若果后面遇到同样的问题都输入Y回车即可。

2.2 配置Python环境变量——添加的路径根据你自己实际设置

2.2.1 找到Python2的安装路径(默认是安装到C盘的,具体看你自己安装的位置),如下图

 
Python路径

2.2.2 右键我的电脑(此电脑)=>高级系统设置=>环境变量=>系统变量的Path中添加(Python路径)。

 
Windows10 Python环境变量配置

2.2.3 检测Python环境是否配置成功,在命令行中执行以下命令:

python --version
 
配置成功结果

注:Python环境变量配置失败的以及其他Windows7/8的,请自行百度。

3. 安装Node
3.1 在命令行(cmd同上,参见1.1)中执行以下命令进行安装:
choco install nodejs.install

3.1.1 关于Script安全策略改变的一些提示以及选择
提示脚本可能会威胁你的电脑,询问你是否改变脚本(Script)安全策略__(提示可能是英文的),然后让你选择Y/N,如下图:

 
改变脚本安全策略提示

解决办法:输入Y回车就可以了,若果后面遇到同样的问题都输入Y回车即可。

3.2 Node环境变量配置

3.2.1 找到Node的安装路径(默认是安装到C盘的,具体看你自己安装的位置),如下图:

 
Node.exe路径

3.2.2 右键我的电脑(此电脑)=>高级系统设置=>环境变量=>系统变量的Path中添加(Node.exe的路径)。

 
Windows10 Python环境变量配置

3.2.3 检测Node环境是否配置成功,在命令行中执行以下命令:

node --version
 
配置成功结果

注:Node环境变量配置失败的以及其他Windows7/8的,请自行百度。

3.3 设置镜像加速 (从此步骤开始必须使用FQ工具)

3.3.1 在命令行中执行以下命令:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4. 安装Yarn、React Native的命令行工具(react-native-cli)
4.1 在命令行中执行以下命令进行安装:
npm install -g yarn react-native-cli
4.2 在命令行中执行以下命令设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
5.安装Android Studio(2.0或2.0以上版本)
5.1 安装JDK1.8(Android Studio暂不支持更高版本)

5.1.1 JDK下载
Java SE Development Kit 下载

5.1.2 配置JDK环境变量(Windows10可以参考如下链接)
Windows10 JDK环境变量的配置

5.2 安装Android Studio

5.2.1 Android Studio 下载
Android Studio 下载(国内能用)
Android Studio 下载(国外被墙)

5.2.2 Android Studio 安装

 
安装步骤一
 
安装步骤二
 
安装步骤三
 
安装步骤四
 
安装步骤五

5.2.3 配置环境变量 ANDROID_HOME

右键我的电脑(此电脑)=>高级系统设置=>环境变量=>新建。

 
ANDROID_HOME配置

5.2.4 将Android SDK的Tools目录添加到PATH变量中

右键我的电脑(此电脑)=>高级系统设置=>环境变量=>选中Path。

 
Tools添加到Path中

5.2.5 检测ANDROID_HOME配置是否成功,重新打开命令行,执行以下命令:

adb

配置成功结果截图

 
配置成功截图

注:ANDROID_HOME环境变量配置失败的以及Windows7/8的,请自行百度。

6. Genymotion 安装(选择安装)

说明:性能比 Android Studio 自带虚拟机性能更好的虚拟机软件。使用前需注册(个人用户免费的)。

6.1 注册与下载(下载界面需要注册登录后显示)

Genymotion注册页面
Genymotion下载页面

6.2 Genymotion 安装

Genymotion 安装参考

7. 测试创建并安装RN项目

7.1 打开Android虚拟机(使用打开手机开发者模式连接到电脑上)
7.2 进入命令行(Windows+R,cmd回车),然后使用cd命令进入到某个文件路径下(用于创建RN项目),然后执行以下命令(创建初始化RN项目项目名为AwesomeProject)
react-native init AwesomeProject
7.3 接着命令行中执行以下(cd)命令,进入到项目路径下:
cd AwesomeProject
7.4 接着在命令行中执行安装命令
react-native run-android
7.5 安装成功结果

7.5.1 安装成功截图

 
安装成功效果

7.5.2 安装失败(存在问题)截图(背景为红色以及一大串英文报错信息)

 
安装或项目存在问题

猜你喜欢

转载自www.cnblogs.com/Lznby/p/9193294.html
今日推荐