基于Expo创建React Native应用的完整教程

基于Expo创建React Native应用的完整教程

引用

CSDN

1.

https://blog.csdn.net/George_Fz/article/details/141887707

本文将详细介绍如何使用Expo创建React Native应用。从项目创建、插件安装到最终在模拟器或Expo Go中运行项目，每个步骤都配有详细的命令行操作和环境配置指导。

1. 项目创建 --- react-native-study（项目名称）

使用以下命令创建一个新的React Native项目：

npx create-expo-app react-native-study --template blank

2. 安装常用插件

为了使项目功能更加完善，需要安装一些常用的插件：

/*
* 有助于运行项目到 web 端
*/
npx expo install react-dom react-native-web @expo/metro-runtime
/*
* icon 库 / 图片/视频选择器 / 用于 React Native 的动画库
*/
npx expo install @expo/vector-icons expo-image-picker react-native-reanimated
/*
* 用于 React Native 的手势库 / 捕获视图的截图 / 访问和操作媒体库
*/
npx expo install react-native-gesture-handler react-native-view-shot expo-media-library
/*
* 用于将 DOM 节点转换为图像
*/
npx expo install dom-to-image
/*
* 安装 react-navigation 导航
*/
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context  

3. 运行项目到 模拟器 或 Expo Go

3.1项目运行前软件准备

在运行项目之前，需要确保已经安装了以下软件：

• Android Studio：下载链接
• Expo Go：下载链接

3.2 项目运行前环境搭配

需要添加环境变量，并通过以下命令检验是否添加成功：

adb --version

3.3 打开 Android Studio

按照以下步骤配置Android Studio：

现在，您可以随时通过按下AVD管理器窗口中的播放按钮来运行此仿真器。

3.4 在项目终端 执行命令

在项目目录下执行以下命令启动开发服务器：

npx expo start

当您在开始开发页面上使用npx expo start启动开发服务器时，按a打开Android模拟器。Expo CLI将自动安装Expo Go。

3.5 最终效果

（此处应有最终效果的图片或描述，但原文未提供）