使用React Native时，使用Realm

在React Native中，我们使用Realm作为一种持久化数据的保存方法。在移动应用中，SQLite可能是主流选择，但是在React Native中，我们选择了Realm，因为React Native中的SQLite库不是很理想。

安装

yarn add realm @realm/react react-native-get-random-values

yarn add --dev @realm/babel-plugin

babel设置

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@realm/babel-plugin'],
};

模型的实现

import {Realm} from '@realm/react';

export class Task extends Realm.Object<Task> {
  _id: Realm.BSON.ObjectId = new Realm.BSON.ObjectId();
  description!: string;
  isComplete: boolean = false;
  createdAt: Date = new Date();
  userId!: string;

  static primaryKey = '_id';

  constructor(realm: Realm, description: string, userId?: string) {
    super(realm, {description, userId: userId || '_SYNC_DISABLED_'});
  }
}

import {createRealmContext} from '@realm/react';
import {Task} from './Task';

export const TaskRealmContext = createRealmContext({
  schema: [Task],
});

将模型传递给createRealmContext的schema。

使用实际的情况

我将把RealmProvider包围起来。

import React from 'react';
import {SafeAreaView, useColorScheme} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import {TaskRealmContext} from './models';
import Home from './Home';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const {RealmProvider} = TaskRealmContext;

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <RealmProvider>
        <Home />
      </RealmProvider>
    </SafeAreaView>
  );
}

export default App;

書き込み処理

const {useRealm} = TaskRealmContext;

function Home(): JSX.Element {
  const realm = useRealm();

  return (
    <View>
      <Button
        onPress={() => {
          realm.write(() => {
            return new Task(realm, 'test');
          });
        }}
        title="Add"
      />
    </View>
  );
}

realm.write(() => {
  return new Task(realm, 'test');
});

你可以在这里将数据写入realm。
因为realm可以直接写入模型，所以我认为实现起来很简单。