Expo Go 实践教程 | 宝宝男的代码保育园

type

status

date

slug

summary

Expo CLI

环境依赖

Node.js LTS release

如果是 macOS，还需要安装 Watchman：brew install watchman

使用

创建第一个应用

创建项目

启动服务

扫码后进入expo go软件：

运行与调试

可以使用模拟器、真机来运行、调试 App，这里最推荐的是使用Expo Go来运行。

运行方法

使用Expo Go(推荐)，首先确保手机与电脑处于同一 Wifi 网络中

iOS 使用系统自带的Code Scanner应用扫码

Android 使用Expo Go应用内的扫码按钮

命令行命令

按键	说明
`a`	打开`Android 模拟器`或连接到电脑上的`真机设备`
`i`	打开`iOS模拟器`
`shift + i`	可以选择指定的`iOS模拟器设备`
`w`	打开`Web浏览器`
`j`	打开调试工具
`r`	重载（刷新）App
`m`	打开、关闭开发工具菜单
`?`	显示所有可用命令

详解

按a，打开Android 模拟器或连接到电脑上的真机设备

使用此方法，需要安装 Android Studio，并配置好环境变量、配置 SDK 路径等
并安装好 Android 模拟器，可以使用 Android Studio 运行官方模拟器，也可以自行安装第三方模拟器，并开启开发者模式。
使用安卓真机，就开启开发者模式后，直接用数据线连接到电脑上
在新命令行窗口中，运行adb devices，确定能看到设备。回到 expo 命令行窗口，按a键，即可运行。

按i，打开iOS模拟器

使用此方法，必须是 macOS 系统，并安装好 xCode
PS：按shift + i，可以选择指定 iOS 模拟器设备

按w，打开`Web 浏览器

使用此方法，请参考开发 Web

按j，打开调试工具

按r，重载 App

按m，打开、关闭开发工具菜单

按?，显示所有可用命令

快速开始

PS C:\Users\lenovo\OneDrive\桌面\meditation\TODO-APP-RN> npm run reset-project

todo-app-rn@1.0.0 reset-project node ./scripts/reset-project.js

Do you want to move existing files to /app-example instead of deleting them? (Y/n): y 📁 /app-example directory created. ➡️ /app moved to /app-example/app. ➡️ /components moved to /app-example/components. ➡️ /hooks moved to /app-example/hooks. ➡️ /constants moved to /app-example/constants. ➡️ /scripts moved to /app-example/scripts.

📁 New /app directory created. 📄 app/index.tsx created. 📄 app/_layout.tsx created.

✅ Project reset complete. Next steps:

Run npx expo start to start a development server.

Edit app/index.tsx to edit the main screen.

Delete the /app-example directory when you're done referencing it.

显示/隐藏导航栏(_layout.tsx)

_layout.tsx 详细配置

index.tsx

npm i @react-native-async-storage/async-storage

npm i convex

启动convex:npx convex dev

npx expo install expo-linear-gradient

学习：

创建文件夹backend（cd 进入）

npm init -y

npm i express

稳定版：npm i express@4.21.0

npm i dotenv@16.5.0 cors@2.8.5 @neondatabase/serverless@1.0.0

运行后端：

修改package.jsom

创建server.js

启动服务

安装nodemon

npm i -D nodemon

修改package.json

nodemon运行

dotenv使用

创建.env

使用：

连接https://neon.com/数据库

Neon Serverless Postgres — Ship faster

The database you love, on a serverless platform designed to help you build reliable and scalable applications faster.

https://neon.com/

env导入DATABASE_URL

初始化数据库

插入数据：

查询、删除数据

数据统计接口

在线redis数据库

Upstash Console

Designed for the serverless with per-request pricing and Redis API on durable storage.

https://console.upstash.com/redis?teamid=0

npm i @upstash/redis@1.34.9 @upstash/ratelimit@2.0.5

npx create-expo-app@latest .

npm run reset-project

后端部署：

Cloud Application Platform | Render

On Render, you can build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

https://render.com/

创建.gitignore

创建空白项目

刷新

render部署设置

npm i cron

添加环境变量

cron.js

快乐学习网站学习

Learn backend development the smart way | Boot.dev

Welcome to the most captivating, finger-flying, addictive way to learn to code. The smartest way to learn a thing is to ensure you're never bored.

https://www.boot.dev/

Learn backend development the smart way | Boot.dev

nextjs全站学习

nextjs-course

burakorkmez • Updated Nov 19, 2025

https://www.youtube.com/watch?v=vUYopHWOURg

npx create-next-app@14.2.15 .

npm run dev

prisma使用

npm i prisma --save-dev

npm i @prisma/client

npx prisma init

npx prisma db push

prisma使用（单例模式）

Recommended solution To avoid this, create a single Prisma Client instance by using a global variable:

npm i react-hot-toast

网店宣传站

项目初始化

创建文件夹

vscode打开

npx create-next-app@14.2.25 .

运行 npm run dev

打开浏览器：

prisma连接数据库

安装环境

npm i prisma --save-dev

npm i @prisma/client

npx prisma init

这个命令将会在项目根目录下生成一个 prisma 目录和一个 .env 文件。在 .env 文件中，你可以配置 MySQL 数据库的连接字符串。

配置数据库连接

在 .env 文件中，找到 DATABASE_URL，并设置你的 MySQL 数据库连接信息：

这里的 username 和 password 替换为你 MySQL 的用户名和密码，database_name 则为你使用的数据库名称。

编辑prisma.config

添加数据库结构

运行：

npx prisma generate; npx prisma db push

编写工具类操作数据库

Recommended solution To avoid this, create a single Prisma Client instance by using a global variable:

测试

绘图：

https://react-chartjs-2.js.org/

✅ 2) Excel 导出乱码修复

安装依赖（如果你还没装）：

🔁 替换导出函数为 .xlsx 格式：

按钮绑定更新：

✅ 中文不再乱码

react-hot-toast

npm install react-hot-toast

Installation:

To begin, install the react-hot-toast package using your preferred package manager:

Implementation in Next.js:

Place the Toaster Component.

For global availability of toasts throughout your application, the <Toaster /> component should be placed within your root layout file (e.g., app/layout.js for Next.js App Router or pages/_app.js for Pages Router). This ensures that the toast notifications can be triggered from any component within your application.

代码

Triggering Toasts.

Once the <Toaster /> component is in place, you can trigger toast notifications from any component by importing the toast object and calling its methods.

代码

uploadsomething

Next.js App Router Setup - UploadThing Docs

Learn how to set up a Next.js app router with UploadThing