Realm を React Native で使う

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

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)

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