React-Native项目的环境搭建-win10/android

参考文档

官方文档

安装环境介绍

  • 操作系统:Windows 10 家庭中文版
  • 安装依赖:Node、JDK、Android 环境

Node安装

下载地址:https://nodejs.org/zh-cn/

在这里插入图片描述
下载msi,会帮你配置环境变量,一路默认安装就好,就是node包下载时间较长

JDK安装

安装

下载地址:Java SE Development Kit 8 - Downloads

在这里插入图片描述
点击下载时,要注册一个Oracle账号,然后返回登录就可以下载了,下载好点击安装即可
在这里插入图片描述

配置

搜索系统-> 高级系统设置->环境变量

在这里插入图片描述
在这里插入图片描述
在系统变量中新建 配置 JAVA_HOME 值就是jdk的安装目录

在这里插入图片描述
还需要在系统变量中的Path添加如下配置
在这里插入图片描述

检验

在命令行中输入java与javac,有用法出现代表安装成功
在这里插入图片描述

Android环境配置

下载Android Studio

下载地址:Android Studio

在这里插入图片描述
下载后,点击安装即可

安装 Android SDK

打开Android Studio,进入Tools->SDK Manager
在这里插入图片描述
根据官方文档,安装了Andriod10.0(Q)
在这里插入图片描述

安装模拟器

在这里插入图片描述
点击Create ,选择下载即可
在这里插入图片描述

配置 ANDROID_HOME 环境变量

在系统变量中添加ANDROID_HOME
在这里插入图片描述
在Path中添加如下

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

创建项目

在命令行中输入npx react-native init AwesomeProject,会进行相关依赖的下载

在这里插入图片描述
进入目录,运行npx react-native run-android
在这里插入图片描述
经过上面的配置,就会自动打开一个虚拟机
在这里插入图片描述
用Vscode 打开项目就会发现,展示的内容就是入口文件App.js的内容
在这里插入图片描述
到此环境搭建已完成,可以查询官方文件进行react-native的开发学习了

遇到的问题

  • npx react-native init 项目名时,下载依赖很慢或者终止下载

    查看npm镜像

    npm config get registry
    

    切换下载镜像为淘宝镜像

    npm config set registry https://registry.npm.taobao.org
    
  • npx react-native run-android时,模拟器显示错误

    重新多运行几次npx react-native run-android

  • 其他问题

    可以尝试重启电脑或者重新运行项目,可能是由于有些配置要重启后才能生效的缘故

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值