快速搭建React Native环境(使用expo)

准备工作

必须先要有node环境
没有的话,可以点击上面的node关键字进入node.js官网进行下载
傻瓜式安装即可,安装到C盘

Expo简介

Expo是一个跨平台的App构建工具。可以让你使用JavaScript 语言构建 Android 和ios 的原生应用。

安装VsCode开发工具

点击上面的VsCode进入官网下载
下载下来是安装包
在这里插入图片描述
双击打开安装包
在这里插入图片描述
选择同意协议
在这里插入图片描述
点击浏览选择非系统盘(C盘)
在这里插入图片描述
选择D盘
在这里插入图片描述
按照图片进行勾选,点击下一步,等待完成
在这里插入图片描述
按照完成

在VsCode中,安装Expo Tools插件

在这里插入图片描述
按照图片中提示,搜索并安装Expo Tools插件

在D盘创建一个文件夹(名为myProjects)

在这里插入图片描述
点击进入该文件夹
在这里插入图片描述
在文件路径下输入cmd,打开命令框
在这里插入图片描述
输入以下命令,创建一个名叫my-app项目

npx create-expo-app my-app

在这里插入图片描述
执行到npm install,点击ctrl+c结束进程
在这里插入图片描述
进入文件夹使用yarn安装资源,因为yarn比npm install安装快
注:不能执行yarn的话,就需要先执行以下命令安装yarn

npm install yarn -g

在这里插入图片描述
然后把my-app拖到VsCode打开
在这里插入图片描述
点击查看中的终端,调出终端
在这里插入图片描述
这是输入npm run web会报错,还不能运行在浏览器中
这时,需要先输入以下命令安装依赖,才能运行

npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config

等执行完毕后,输入npm run web就可以运行在浏览器中了。
运行效果如下:
在这里插入图片描述
到这里,你的第一个Expo项目就创建完毕了。
想要在真机上运行,请移步至 react-native项目如何在真机运行?

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值