2024 基于 Expo 创建 react-native 应用教程（一）

目录

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

2. 安装常用插件

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

3.1项目运行前软件准备

3.2 项目运行前环境搭配

3.3 打开 Android Studio

3.4 在项目终端 执行命令 

3.5 最终效果

---

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

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

参考链接https://docs.expo.dev/get-started/set-up-your-environment/?platform=android&device=simulated&mode=expo-go

3.1项目运行前软件准备

Android Studiohttps://developer.android.com/studio?hl=zh-cn
Expo Gohttps://expo.dev/go

3.2 项目运行前环境搭配

添加环境变量

     

 

 检验是否添加成功

adb --version

3.3 打开 Android Studio

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

3.4 在项目终端 执行命令 

npx expo start

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

3.5 最终效果