【React Native】Realmでローカルデータベース

10522 ワード
Android JavaScript iOS Realm reactnative JavaScript テキストリンク

ローカルにデータベース？

ネイティブなモバイルアプリを作成する場合、SPAを含むWebアプリと違って、ローカルへの情報の永続化が必要となる場合があります。あなたのアプリをネイティブアプリにする一つの理由であるかもしれません。

Realm とは

Realm Database は、モバイルアプリで従来使用していたSQLite や Core Data といったデータベースの代替として開発されました。モバイルアプリをターゲットにゼロから設計されたため、非常に高速で使い方もとても簡単です。React Nativeでも使用する事ができるので、使ってみましょう。

前提ライブラリ

本記事は、「NativeBase」の導入を前提としています。一からプロジェクトを作成する場合には、以下の記事を参考に環境作成してください。
【React Native】NativeBase導入

インストール

$ npm install realm --save

使用方法

import React, {Component} from 'react';
import { FlatList } from "react-native";
import { Container, Header, Left, Body, Right, Title, Content, List, ListItem, Text } from 'native-base';
import Realm from 'realm'

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { realm: null };
  }

  componentWillMount() {
    Realm.open({
      schema: [{name: 'Person', properties: {key: 'string', name: 'string'}}]
    }).then(realm => {
      realm.write(() => {
        var current = new Date();
        realm.create('Person', {key: current.toString(), name: 'daisuke'});
      });
      console.log(realm);
      this.setState({ realm });
    });
  }


  render() {
    const displayItem = this.state.realm ? this.state.realm.objects('Person') : [] 

    return (
      <Container>
        <Header>
          <Left />
          <Body>
            <Title>Realmサンプル</Title>
          </Body>
          <Right />
        </Header>
        <Content>
        <FlatList
          data={displayItem}
          renderItem={({item}) =>
            <ListItem>
              <Text>{item.name}</Text>
            </ListItem>
          }
          keyExtractor={item => item.key}
        />
        </Content>
      </Container>
    );
  }
}

一番簡単にRealmでデータベースへの読み書きを実現してみました。プログラムの再起動（リロード）時にレコードが追加され、リストに表示されます。

スキーマ

{schema: [{name: 'Person', properties: {key: 'string', name: 'string'}}]}

上記のような形で、「Person」テーブルに「key, name」という２つのプロパティを持つレコードを定義しています。

動作の様子

リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseRealm