React Native windows环境搭建

1.首先准备下载必须的依赖:Node、JDK 、Android Studio、夜神模拟器
①Node可以直接到 官网 下载,版本必须大于14,我这边用的是v16.15.1
在这里插入图片描述

②Jave JDK,我直接在360软件管家安装的,搜的是JDK 11,React Native推荐的是Java Development Kit [JDK] 11:
在这里插入图片描述A.配置环境变量,用window + R键,输入sysdm.cpl,打开环境变量窗口,新建系统变量JAVA_HOME,CLASSPATH(;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar)
注意:JAVA_HOME的变量值为自己安装jdk的文件!!!
在这里插入图片描述
在这里插入图片描述
B.选择“系统变量”中变量名为“Path”的环境变量,双击该变量,把JDK安装路径中bin目录的绝对路径,添加到Path变量的值中,并使用半角的分号和已有的路径进行分隔。
  变量名:path
  变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
  在这里插入图片描述

打开git 窗口,执行java -version
在这里插入图片描述
再执行javac -version
在这里插入图片描述

③安装Android Studio
A.直接在360软件管家安装
在这里插入图片描述
Android Studio 默认会安装最新版本的 Android SDK,所以一定要分清Android Studio跟Android SDK的安装目录,这2个我都是安装在D盘
在这里插入图片描述
B.下载完后,一键安装,安装界面中选择"Custom"选项,确保选中了以下几项:

  • Android SDK

  • Android SDK Platform

  • Android Virtual Device

然后点击"Next"来安装选中的组件。
在这里插入图片描述
安装完后,可以在Appearance & Behavior → System Settings → Android SDK,查看自己的SDK目录。

C.接着再去安装如下这2个插件:
在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 12 (S)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):

  • Android SDK Platform 31 Intel x86 Atom_64 System

  • Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

在这里插入图片描述
D.配置Android 的环境变量
系统变量,新建ANDROID_HOME,变量值为安装的android的SDK的安装目录,具体查看可参照上个步骤(在Appearance & Behavior → System Settings → Android SDK,查看自己的SDK目录)
在这里插入图片描述
配置完,在系统变量Path添加如下:

  • %ANDROID_HOME%\platform-tools
  • %ANDROID_HOME%\emulator
  • %ANDROID_HOME%\tools
  • %ANDROID_HOME%\tools\bin
  • 在这里插入图片描述
    ④安装夜神模拟器
    A直接到360软件管家下载,下载完启动,启动好后在CMD,执行adb devices
    在这里插入图片描述
    如果出现 “执行 adb devices显示List of devices attached,大家自行查找解决方案!!!

然后再进行连接adb connect 127.0.0.1:62001
在这里插入图片描述

到这里 React Native所依赖的环境就全部安装好了
2.初始化React Native项目

npx react-native init AwesomeProject

启动项目,npm run android,第一次执行的时候特别慢,请耐心等待

注意:项目运行一定不要把这个窗口关了
在这里插入图片描述

当在夜神模拟器能看到如下页面,就说明所有环境都搭建好了,可以安安心心的敲代码了~~~
在这里插入图片描述
下一篇: React Native 路由篇 react-navigation

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值