开始使用 Drizzle 和 Expo
This guide assumes familiarity with:
- Expo SQLite - 一个可通过 SQLite API 查询的数据库访问库 - 在此阅读
步骤 1 - 从 Expo 模板设置项目
npm
yarn
pnpm
bun
npx create expo-app --template blank-typescript您可以在 此处 了解更多关于此模板的信息。
基本文件结构
安装模板并添加 db 文件夹后，您将找到以下内容：在 db/schema.ts 文件中定义的 drizzle 表。drizzle 文件夹包含 SQL 迁移文件和快照
📦 <项目根目录>
├ 📂 assets
├ 📂 drizzle
├ 📂 db
│ └ 📜 schema.ts
├ 📜 .gitignore
├ 📜 .npmrc
├ 📜 app.json
├ 📜 App.tsx
├ 📜 babel.config.ts
├ 📜 drizzle.config.ts
├ 📜 package.json
└ 📜 tsconfig.json步骤 2 - 安装 expo-sqlite 包
npm
yarn
pnpm
bun
npx expo install expo-sqlite步骤 3 - 安装所需的包
npm
yarn
pnpm
bun
npm i drizzle-orm
npm i -D drizzle-kit步骤 4 - 将 Drizzle ORM 连接到数据库
在根目录下创建一个 App.tsx 文件并初始化连接：
import * as SQLite from 'expo-sqlite';
import { drizzle } from 'drizzle-orm/expo-sqlite';
const expo = SQLite.openDatabaseSync('db.db');
const db = drizzle(expo);步骤 5 - 创建表
在 db 目录下创建一个 schema.ts 文件并声明您的表：
import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";
export const usersTable = sqliteTable("users_table", {
id: int().primaryKey({ autoIncrement: true }),
name: text().notNull(),
age: int().notNull(),
email: text().notNull().unique(),
});步骤 6 - 设置 Drizzle 配置文件
Drizzle 配置 - 一个用于 Drizzle Kit 的配置文件，包含有关您的数据库连接、迁移文件夹和架构文件的所有信息。
在项目根目录下创建一个 drizzle.config.ts 文件并添加以下内容：
import { defineConfig } from 'drizzle-kit';
export default defineConfig({
dialect: 'sqlite',
driver: 'expo',
schema: './db/schema.ts',
out: './drizzle',
});步骤 7 - 设置 metro 配置
在根目录下创建一个文件 metro.config.js 并在其中添加以下代码：
const { getDefaultConfig } = require('expo/metro-config');
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('sql');
module.exports = config;步骤 8 - 更新 babel 配置
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 添加此行
};
};步骤 9 - 对数据库应用更改
使用 Expo，您需要通过 drizzle-kit generate 命令生成迁移，并通过 drizzle-orm 的 migrate() 函数在运行时应用它们。
生成迁移：
npx drizzle-kit generate步骤 10 - 应用迁移并查询数据库：
让我们在 App.tsx 文件中执行迁移和查询，以创建、读取、更新和删除用户。
import { Text, View } from 'react-native';
import * as SQLite from 'expo-sqlite';
import { useEffect, useState } from 'react';
import { drizzle } from 'drizzle-orm/expo-sqlite';
import { usersTable } from './db/schema';
import { useMigrations } from 'drizzle-orm/expo-sqlite/migrator';
import migrations from './drizzle/migrations';
const expo = SQLite.openDatabaseSync('db.db');
const db = drizzle(expo);
export default function App() {
const { success, error } = useMigrations(db, migrations);
const [items, setItems] = useState<typeof usersTable.$inferSelect[] | null>(null);
useEffect(() => {
if (!success) return;
(async () => {
await db.delete(usersTable);
await db.insert(usersTable).values([
{
name: 'John',
age: 30,
email: 'john@example.com',
},
]);
const users = await db.select().from(usersTable);
setItems(users);
})();
}, [success]);
if (error) {
return (
<View>
<Text>迁移错误: {error.message}</Text>
</View>
);
}
if (!success) {
return (
<View>
<Text>迁移进行中...</Text>
</View>
);
}
if (items === null || items.length === 0) {
return (
<View>
<Text>空</Text>
</View>
);
}
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
height: '100%',
justifyContent: 'center',
}}
>
{items.map((item) => (
<Text key={item.id}>{item.email}</Text>
))}
</View>
);
}步骤 11 - 预构建并运行 expo 应用
npm
yarn
pnpm
bun
npx expo run:ios