Expo 模板项目入门教程

Expo 模板项目入门教程

expo-template 📱 A template for your next Expo project: Bun, Expo 51, TypeScript, TailwindCSS, DrizzleORM, Sqlite, EAS, GitHub Actions, Env Vars, expo-router, react-query, react-hook-form. 项目地址: https://gitcode.com/gh_mirrors/exp/expo-template

1. 项目介绍

Expo 模板项目是一个基于最新框架和配置的免费项目模型，适用于开发本地优先的Expo项目。本项目集成了Expo v51、React Native、SQLite、DrizzleORM、NativeWind、TailwindCSS等流行的技术栈，旨在帮助开发者快速搭建具有本地持久化存储功能的跨平台应用。

2. 项目快速启动

环境要求

• Node.js 20+ 和 pnpm 或 bun
• iOS Simulator 或 Android Studio Emulator
• 对于Windows用户：需要安装Microsoft Visual C++ Redistributable

克隆项目

首先，克隆本项目到本地环境：

bunx create-expo-app --template https://github.com/expo-starter/expo-local-first-template

运行项目

然后，你可以根据以下命令在本地环境中运行项目，并享受实时重新加载功能：

# 运行iOS模拟器
bun run dev:ios

# 或者运行Android模拟器
bun run dev:android

这将打开iOS模拟器或Android模拟器中的应用。

3. 应用案例和最佳实践

案例一：集成SQLite数据库

本项目已经集成了SQLite数据库，开发者可以轻松地实现本地数据存储功能。例如，通过DrizzleORM进行数据模型的定义和操作：

import { drizzle } from 'drizzle-orm';
import { sqlite } from 'drizzle-orm-sqlite';

// 创建数据库实例
const db = drizzle(new sqlite.Database(':memory:'));

// 定义数据模型
const users = db.table('users').columns({
  id: dbinteger('id').notNull().primaryKey(),
  name: dbvarchar('name').notNull(),
});

// 插入数据
await users.insert({ id: 1, name: 'Alice' });

// 查询数据
const user = await users.select().where.eq(users.id, 1).get();

案例二：使用TailwindCSS进行样式设计

本项目使用了TailwindCSS，开发者可以利用它来快速设计响应式界面。例如，为按钮添加样式：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

4. 典型生态项目

生态项目一：Expo Starter Kit

如果你在寻找一个更适用于生产的模板，可以考虑使用Expo Starter Kit。它提供了更完整的功能和配置，并且购买支持将有助于维护这些免费模板。

生态项目二：rn-reusables

本项目使用了rn-reusables库，它提供了许多通用的React Native组件，可以加速开发流程。

通过以上教程，开发者可以快速上手Expo模板项目，并利用其提供的工具和库来构建强大的本地优先应用。

expo-template 📱 A template for your next Expo project: Bun, Expo 51, TypeScript, TailwindCSS, DrizzleORM, Sqlite, EAS, GitHub Actions, Env Vars, expo-router, react-query, react-hook-form. 项目地址: https://gitcode.com/gh_mirrors/exp/expo-template