Drizzle 和 Expo 入门
本指南假定您熟悉
- Expo SQLite - 一个提供通过 SQLite API 查询数据库的库 - 在此阅读
步骤 1 - 从 Expo 模板设置项目
npm
yarn
pnpm
bun
npx create expo-app --template blank-typescript您可以在 此处阅读有关此模板的更多信息。
基本文件结构
安装模板并添加 `db` 文件夹后，您将找到以下内容：在 `db/schema.ts` 文件中是 drizzle 表定义。 `drizzle` 文件夹包含 SQL 迁移文件和快照
📦 <project root>
├ 📂 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);第 4 步 - 创建表
在 `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(),
});第 5 步 - 设置 Drizzle 配置文件
Drizzle config - 由 Drizzle Kit 使用的配置文件，包含有关你的数据库连接、迁移文件夹和 schema 文件的所有信息。
在项目的根目录中创建 drizzle.config.ts 文件并添加以下内容
import { defineConfig } from 'drizzle-kit';
export default defineConfig({
dialect: 'sqlite',
driver: 'expo',
schema: './db/schema.ts',
out: './drizzle',
});步骤 6 - 设置 `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;步骤 7 - 更新 `babel` 配置
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- add this
};
};步骤 8 - 应用数据库更改
使用 Expo，您需要使用 `drizzle-kit generate` 命令生成迁移，然后使用 `drizzle-orm` 的 `migrate()` 函数在运行时应用它们
生成迁移
npx drizzle-kit generate步骤 9 - 应用迁移并查询数据库：
我们来修改 **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: '[email protected]',
},
]);
const users = await db.select().from(usersTable);
setItems(users);
})();
}, [success]);
if (error) {
return (
<View>
<Text>Migration error: {error.message}</Text>
</View>
);
}
if (!success) {
return (
<View>
<Text>Migration is in progress...</Text>
</View>
);
}
if (items === null || items.length === 0) {
return (
<View>
<Text>Empty</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>
);
}步骤 10 - 预构建并运行 Expo 应用
npm
yarn
pnpm
bun
npx expo run:ios