Become a Gold Sponsor

Drizzle <> Expo SQLite

根据 官方网站,Expo是一个用于开发、构建和发布React Native应用程序的工具生态系统。 它由Hermes JavaScript运行时和Metro捆绑器提供支持,Drizzle Expo驱动程序旨在原生支持这两者。

Drizzle ORM为Expo SQLite提供了业界最佳的工具包:

npm
yarn
pnpm
bun
npm i drizzle-orm expo-sqlite@next
npm i -D drizzle-kit
import { drizzle } from "drizzle-orm/expo-sqlite";
import { openDatabaseSync } from "expo-sqlite/next";

const expo = openDatabaseSync("db.db");
const db = drizzle(expo);

await db.select().from(users);

实时查询

使用 useLiveQuery 钩子,您可以使任何Drizzle查询变为响应式:

import { useLiveQuery, drizzle } from 'drizzle-orm/expo-sqlite';
import { openDatabaseSync } from 'expo-sqlite/next';
import { Text } from 'react-native';
import * as schema from './schema';

const expo = openDatabaseSync('db.db', { enableChangeListener: true }); // <-- 启用更改监听器
const db = drizzle(expo);

const App = () => {
  // 当数据更改时自动重新渲染
  const { data } = useLiveQuery(db.select().from(schema.users));
  return <Text>{JSON.stringify(data)}</Text>;
};

export default App;

使用Drizzle Kit进行Expo SQLite迁移

您可以使用Drizzle Kit进行SQL迁移生成。
在继续之前,请确保检查Drizzle迁移的工作原理。
Expo / React Native要求您将SQL迁移捆绑到应用程序中,我们已经为您提供支持。

安装babel插件

将SQL迁移文件作为字符串直接打包到您的包中是必要的。

npm install babel-plugin-inline-import

更新配置文件。

您需要更新 babel.config.jsmetro.config.jsdrizzle.config.ts 文件

babel.config.js
module.exports = function(api) {
  api.cache(true);

  return {
    presets: ['babel-preset-expo'],
    plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 添加此项
  };
};
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;

确保在Drizzle Kit配置中设置 dialect: 'sqlite'driver: 'expo'

drizzle.config.ts
import type { Config } from 'drizzle-kit';

export default {
	schema: './db/schema.ts',
	out: './drizzle',
  dialect: 'sqlite',
	driver: 'expo', // <--- 非常重要
} satisfies Config;

生成迁移

在创建SQL模式文件和drizzle.config.ts文件后,您可以生成迁移

npx drizzle-kit generate

将迁移添加到您的应用程序

现在您需要从 ./drizzle 文件夹中将 migrations.js 文件导入到您的Expo/React Native应用中。 您可以使用我们自定义的 useMigrations 迁移钩子在应用程序启动时运行迁移,手动在 useEffect 钩子中按您希望的方式进行。

App.tsx
import { drizzle } from "drizzle-orm/expo-sqlite";
import { openDatabaseSync } from "expo-sqlite/next";
import { useMigrations } from 'drizzle-orm/expo-sqlite/migrator';
import migrations from './drizzle/migrations';

const expoDb = openDatabaseSync("db.db");

const db = drizzle(expoDb);

export default function App() {
  const { success, error } = useMigrations(db, migrations);

  if (error) {
    return (
      <View>
        <Text>迁移错误: {error.message}</Text>
      </View>
    );
  }

  if (!success) {
    return (
      <View>
        <Text>迁移正在进行中...</Text>
      </View>
    );
  }

  return ...你的应用组件;
}