react native环境搭建

本文介绍两种在Windows环境下搭建React Native开发环境的方法。一种是通过官方文档推荐的方式安装Chocolatey包管理器来简化安装流程,另一种是手动安装必要的软件并配置环境变量。文章详细说明了每一步的操作过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

windows环境搭建有两种方式:

第一种官方文档的做法:

第一步:

打开cmd.exe以管理员身份运行输入

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
安装包管理器 Chocolatey(windows系统自带的包管理器)

第二步:

利用Chocolatey安装nodeJS,在命令窗口输入:

choco install nodejs.install

这个路径不用配置,安装的同时系统已经配好

利用Chocolatey安装python,在命令窗口输入:

choco install python2

在环境变量中配置python 的路径

第三步:

测试工具是否安装成功:

测试node是否安装成功,在命令窗口输入:

node -v

测试python是否安装成功:

python -v

第四步:

在命令行输入npm install -g yarn react-native-cli安装react native 的命令行工具:

第五步:

安装androidstudioJDK的版本必须是1.8以上,

在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须是这个版本)。然后还要勾选最底部的Android Support Repository.

配置Androidsdk的环境变量:

ANDROID_HOME

D:\sdk

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

第六步:

新建rectnative项目:

react-native init AwesomeProject
进入项目目录:

cd AwesomeProject

运行Android:

react-native run-android

第二种方式:

第一步:

安装GIT、node、python、模拟器等工具,并测试是否安装成功

第二步:

安装jdk(版本必须在1.8以上)

安装SDK配置环境变量:

ANDROID_HOME:Android SDK的位置

:(ANDROID_HOME=> E:\Android\sdk)

设置环境变量PATH:

例如:(PATH= %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

设置sdk,在命令行输入android在出现的界面中选中:

Android SDK Tools

Android SDK platform_tools

Android SDK Bulid_tools
Android 6.0 (API 23) 
Android Support Repository

第三步:

克隆react-native-cli,默认安装在c盘,如果不克隆出来,则会将C盘占满

在其他盘新建一个文件夹:按shift,选中在命令窗口打开:

输入:git clone https://github.com/facebook/react-native.git

将react-native-cli克隆在该文件夹下:

克隆完成后:进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

安装好之后,可以命令行下就有react-native命令了

步:

创建项目:cd reactworkspace

输入:react-native init AwesomeProject

项目创建完成后是这样的:


注意红线标注出来的

第五步:

进入到港创建的项目下,按shift,使用命令窗口打开,输入react-native start,会出现断口号,等几分钟让他运行完后在浏览器输入

http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。

第七步:

刚刚运行package的命令行不要关闭,重新启动一个新的命令行,

进入项目目录,输入react-native run-android (记得在输入此命令前,要先打开模拟器,或连接真机)

等待运行(如果是第一次运行,首先会下载gradle,时间较长)

运行成功后出现下图

运行完成会出现欢迎界面:如果失败了

摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口

这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081

设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值