React Native跨平台适配：如何条件导入WatermelonDB适配器且导出不变？

开发者阿泽

2026-6-27

解决方案

当然可以用条件判断替代手动注释，完全不需要修改export { database }的结构，以下是具体实现：

核心思路

利用运行环境的标识（React Native的Platform模块或Web环境的window对象）自动选择对应的适配器，通过同步的require导入对应模块，避免手动切换注释。

完整代码示例

import { Database } from '@nozbe/watermelondb';
import { Platform } from 'react-native';
import { DbModels, DbSchema } from './schema';

let mowebDb = 'moweb';
let adapter;

// 根据平台自动选择适配器
if (Platform.OS === 'web') {
  const LokiJSAdapter = require('@nozbe/watermelondb/adapters/lokijs').default;
  adapter = new LokiJSAdapter({
    schema: DbSchema,
    dbName: mowebDb,
    useWebWorker: false,
    useIncrementalIndexedDB: true,
  });
} else {
  const SQLiteAdapter = require('@nozbe/watermelondb/adapters/sqlite').default;
  adapter = new SQLiteAdapter({
    dbName: mowebDb,
    schema: DbSchema,
  });
}

const database = new Database({
  adapter,
  actionsEnabled: true,
  modelClasses: DbModels,
});

export { database }

适配纯Web环境的替代方案

如果你的Web端不是基于React Native Web构建的，可以用window对象判断环境，替换上述的Platform.OS判断逻辑：

if (typeof window !== 'undefined') {
  // Web环境加载LokiJSAdapter
  const LokiJSAdapter = require('@nozbe/watermelondb/adapters/lokijs').default;
  adapter = new LokiJSAdapter({
    schema: DbSchema,
    dbName: mowebDb,
    useWebWorker: false,
    useIncrementalIndexedDB: true,
  });
} else {
  // 移动端加载SQLiteAdapter
  const SQLiteAdapter = require('@nozbe/watermelondb/adapters/sqlite').default;
  adapter = new SQLiteAdapter({
    dbName: mowebDb,
    schema: DbSchema,
  });
}