最新版react-native环境配置,详细版!

引言:写在前面的话:react-native的环境配置过程确实有点繁琐,我在配置的时候,就弄了很久,于是,写下了这篇,希望大家都能顺利配好环境,少踩坑。(此文为windows下的android配置)

中文官网:搭建开发环境 · React Native 中文网

接下来,就跟着官网,开始配置环境!

1、安装node

Node.Js中文网

下载安装即可,按照流程走下载即可

注意 Node 的版本应大于等于 16,安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程

配置淘宝镜像:npm config set registry https://registry.npm.taobao.org

检查有没有配置成功:npm config get registry

如果输入这个检查指令,显示https://registry.npm.taobao.org就表示配置成功了

2、React Native 需要 Java Development Kit [JDK] 11,去官网安装jdk11

react-native要求下载11的,下载地址如下:

Java Downloads | Oracle

最新版react-native环境配置,详细版!_第1张图片

 配置环境:

最新版react-native环境配置,详细版!_第2张图片

最新版react-native环境配置,详细版!_第3张图片最新版react-native环境配置,详细版!_第4张图片

新增 JAVA_HOME

里面的值设置为Java的安装路径

最新版react-native环境配置,详细版!_第5张图片

环境变量编辑【path】选项;

双击path,然后点编辑,分两次添加,第一次添加:%JAVA_HOME%\bin,第二次添加:%JAVA_HOME%\jre\bin

最新版react-native环境配置,详细版!_第6张图片

 新建一个名为【CLASSPATH】的环境变量,变量值(直接复制下面一行)

.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar

最新版react-native环境配置,详细版!_第7张图片

 验证是否成功:win+r

cmd     然后点确定

最新版react-native环境配置,详细版!_第8张图片

 输入:javac -version   出现对应版本号即成功最新版react-native环境配置,详细版!_第9张图片

 3、安装Android Studio

需要外网下载,进行下载,拿到安装包(这个的下载时间有点久)

最新版react-native环境配置,详细版!_第10张图片

 接在一直点下一步即可

然后配置sdk

最新版react-native环境配置,详细版!_第11张图片

 最新版react-native环境配置,详细版!_第12张图片

 借用官网的话:

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

记住这个地址!!!等下需要用到!! 
(下面配置环境需要用到的地址)

最新版react-native环境配置,详细版!_第13张图片

点击apply

最新版react-native环境配置,详细版!_第14张图片

 接着配置环境

ANDROID_HOME

值为刚刚所记下配置环境的地址

最新版react-native环境配置,详细版!_第15张图片

和刚才进入到这个界面一样的方法,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

最新版react-native环境配置,详细版!_第16张图片

 4、下载夜神模拟器

点击下一步下载即可

5、至此,环境配置应该没有问题了,然后起项目 运行试试

npm i -g react-native-cli

npx react-native init project

最新版react-native环境配置,详细版!_第17张图片

我这里报错了,

解决办法:

产生这个问题的原因是:使用这种方式创建工程,react-native版本是0.69 版本上不适用。各位可以检查下自己安装的React-native的版本。改成:npx react-native init 项目名字 --version 0.68.2  即可。 

再次输入这个指令,输入y即可

最新版react-native环境配置,详细版!_第18张图片

看到这个界面就是成功了

最新版react-native环境配置,详细版!_第19张图片

 接着来连接模拟器:

打开模拟器

输入cd project进入项目

输入 adb connect 127.0.0.1:62001

最后:输入   npx react-native run-android

最新版react-native环境配置,详细版!_第20张图片

看到这个界面 就成功了! 

最新版react-native环境配置,详细版!_第21张图片

你可能感兴趣的:(react,native,react.js,javascript)