WIN10下搭建react-native开发Android环境

Posted 2020-12-29 TaoLand

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WIN10下搭建react-native开发Android环境相关的知识，希望对你有一定的参考价值。

最近公司要求使用react-native进行移动端开发，据说macOS上开发坑会少的多，但我们是windows，莫法，直接抗吧！周末配置环境遇到很多问题，谨以此文做个记录。。。

准备

安装Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get
- 以管理员的身份来运行命令提示符
  - 打开C盘里的WindowsSystem32,找到cmd.exe,右键‘已管理员身份运行’
- 运行@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1‘))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin
使用chocolatey安装Python 2
choco install python2
使用chocolatey安装Node
choco install nodejs.install
切换npm到淘宝的镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
使用npm安装Yarn和React Native

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
- 安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名

android Studio

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

直接去http://www.android-studio.org/下载3.0.1.0的就可以了
直接默认安装就可以了
然后打开，点击右下角的configure配置
3个东西必须安装，其他随意，Android SDK Platform 23和23.0.1和Android Support Repository
另外记住你Sdk的安装位置，后面有用，我是安在D:AndroidSdk

技术分享图片

设置ANDROID_HOME环境变量
- 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建用户变量
- 变量名ANDROID_HOME，变量值D:AndroidSdk(这是我的，具体看你的sdk位置)
- 设置完需要关闭所以的命令符窗口，这样新的环境变量才能生效
  
  JAVA
Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载
根据自己选择32位还是，64
安装
- 在D盘新建一个java文件夹，在java文件下新建两个文件夹，分别命名为jdk和jre.3.双击程序进行安装，安装时有两次选择路径的机会，第一次是让你选择jdk安装路径，选择为D:javajdk，第二次是让你选择jre的安装路径，选择为D:javajre
- 安装完成后，进行环境变量的配置，计算机右击属性，-高级系统设置-环境变量-选择下边的系统变量
- 新建
  变量名：Path
  变量值C:ProgramDataOracleJavajavapath;%java_home%in;%java_home%jrein
- 新建
  变量名：JAVA_HOME
  变量值：D:javajdk
- 新建
  变量名：ClassPath
  变量值：.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar;
- 测试
  - 打开cmd,输入java
  - 输入java -version
    
    连接真机
自己用的小米6来连接的，没用模拟器，坑多的1匹，慢慢道来
- 必须关闭MIUI优化
- 360助手必须卸了，否则端口占用
- 选择文件传输（MTP）
- 打开“USB安装”选项
- 以上都可能导致小米4以上机型跑不起来。。。
  
  运行
连接好了手机我们就可以跑项目了
cmd
d: 请不要在命令行默认的System32目录中init项目！会有各种权限限制导致不能运行！所以我跑去D盘安的项目
react-native init rntest
cd rntest
react-native run-android
好了，手机终于可以看见 welcome to react native了，恭喜。。。