Realm を React Native で使う

Shunsuke Sawada

React Native でアプリを作っていて、保存したいデータがある場合 Realm が便利そう。
https://realm.io/jp/news/introducing-realm-react-native/

準備

shell
1
2
3
4
$ npm install -g rnpm
$ npm install --save realm 
$ react-native init AwesomeReact
$ rnpm link realm

実装

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  ListView
} from 'react-native';
import Realm from 'realm'


// 犬の名前をリストで出してみる
class DogList extends Component {
  constructor(props) {
    super(props)
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
    this.state = {
      dataSource: ds.cloneWithRows(this.props.dogs)
    }
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData.name}</Text> }>
      </ListView>
    )
  }
}

class FirstPage extends Component {
  // テスト用にここでデータを作るよ
  componentWillMount() {
    let realm = new Realm({
      schema: [{ name: 'Dog', properties: { name: 'string' } }]
    })
    realm.write(() => {
      realm.create('Dog', { name: 'My Dog' })
    })
    //console.log(realm.path)
    this.state = ({ realm: realm })
  }
  render() {
    return (
      <View>
        <DogList dogs={this.state.realm.objects('Dog')}></DogList>
      </View>
    );
  }
}

export default class AwesomeReact extends Component {
  render() {
    return(
      <FirstPage />
    );
  }
}

AppRegistry.registerComponent('AwesomeReact', () => AwesomeReact)

確認

GUIでデータを確認できる。
便利〜
https://itunes.apple.com/jp/app/realm-browser/id1007457278?mt=12
Screen Shot 2017-03-03 at 15.46.50

realmファイルの場所が聞かれるが、
console.log(realm.path) とかすればコンソールで確認できる。

1
/Users/USER_NAME/Library/Developer/CoreSimulator/Devices/27494D9F-BC97-411C-86DF-67951B5BF843/data/Containers/Data/Application/31C3B98B-704D-4FA1-BB4A-495902419397/Documents/default.realm

デフォルトならみたいなパスになっている。

Realm Browser でファイルを選択しようとすると Library がないじゃん!って場合があるので
$ chflags nohidden ~/Library で表示しよう。

参考

https://realm.io/jp/news/introducing-realm-react-native/
https://realm.io/docs/javascript/latest/#introduction
https://discussions.apple.com/thread/3983467?start=0&tstart=0

Shunsuke Sawada

おすすめの記事

Squidでのプロキシサーバー構築
30