当前位置:   article > 正文

快速搭建React Native环境(使用expo)_expo reat-native xcode 如何使用

expo reat-native xcode 如何使用

准备工作

必须先要有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
  • 1

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

npm install yarn -g
  • 1

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/411892
推荐阅读
相关标签
  

闽ICP备14008679号