使用 Drizzle 和 OP-SQLite 开始
This guide assumes familiarity with:
- OP-SQLite - React-native 的 SQLite 库 - 在此阅读
第一步 - 从 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第二步 - 安装所需包
npm
yarn
pnpm
bun
npm i drizzle-orm @op-engineering/op-sqlite
npm i -D drizzle-kit第三步 - 将 Drizzle ORM 连接到数据库
在根目录创建一个 App.tsx 文件并初始化连接：
import { open } from '@op-engineering/op-sqlite';
import { drizzle } from 'drizzle-orm/expo-sqlite';
const opsqliteDb = open({
name: 'db',
});
const db = drizzle(opsqliteDb);第四步 - 创建一个表
在 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(),
});第五步 - 设置 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',
});第六步 - 设置 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;第七步 - 更新 babel 配置
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 添加这一行
};
};第八步 - 将更改应用到数据库
在 Expo 中，您需要使用 drizzle-kit generate 命令生成迁移，并使用 drizzle-orm 的 migrate() 函数在运行时应用它们。
生成迁移：
npx drizzle-kit generate第九步 - 应用迁移并查询您的数据库：
让我们在 App.tsx 文件中添加迁移和查询以创建、读取、更新和删除用户
import { Text, View } from 'react-native';
import { open } from '@op-engineering/op-sqlite';
import { useEffect, useState } from 'react';
import { drizzle } from 'drizzle-orm/op-sqlite';
import { usersTable } from './db/schema';
import { useMigrations } from 'drizzle-orm/op-sqlite/migrator';
import migrations from './drizzle/migrations';
const opsqliteDb = open({
name: 'db',
});
const db = drizzle(opsqliteDb);
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>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>
);
}第十步 - 预构建并运行 Expo 应用
npm
yarn
pnpm
bun
npx expo run:ios