react-nativeでiOSアプリ開発　第11回　realmをreact-nativeで扱う

皆さんこんにちは個別指導塾コミット塾長、AWESOME開発担当の船津です。

今回はクライアントサイドで用いられるモバイルデータベースの筆頭である、realmを使ってみます。
エキサイト翻訳、amazonなど有名どころも使っていると噂のすごいやつです。
SQLiteよりも軽くて早いとか！？

詳しくは公式サイトをどうぞ
https://realm.io/docs/react-native/latest/#writes

目次 [hide]

細かいことはわからないですが、早速試してみましょう

今回は猫の名前を入れるとリストビューで表示される、というものをつくります。
今回は猫の名前以外のパラメータは固定です。
このあたりは次回フォームを導入して解消してみましょう。

と、その前に、以下のコマンドを実行してreact nativeのプロジェクトを作成し、realmをインストールして下さい。
ract-native init realmTest
cd realmTest
npm install realm --save

今回はindex.ios.jsだけ編集します。

ListViewはrealmからインポートしたほうが早いとか
猫の名前を入力するとListViewに表示されます

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native'
import Realm from 'realm'
import { ListView } from 'realm/react-native';
 
const CatSchema = {
  name: 'Cat',
  properties: {
    name: 'string',
    birthplace: 'string',
    sex: 'string',
    type: 'string',
  }
}
 
let realm = new Realm({schema: [CatSchema] })
 
class realmTest extends Component {
  constructor(props) {
    super(props)
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    let src = realm.objects('Cat')
    this.state = ({
      dataSource: ds.cloneWithRows(src),
      data:src
    });
  }
   
   _updateData(){ 
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.state.data)
    });
  } 
   
  _renderRow(rowData) {
    return (
      <View style={{marginTop:10}}>
        <Text>名前：{rowData.name}</Text>
        <Text>出生地：{rowData.birthplace}</Text>
        <Text>性別：{rowData.sex}</Text>
        <Text>品種：{rowData.type}</Text>
      </View>
    )
  }
 
  render() {
      
    return (
      <View style={styles.container}>       
        <View style={styles.input}>
          <Text style={styles.welcome}>
          猫ちゃんの名前を入れてね       
          </Text>
          <TextInput
            style={{
              height: 30, 
              width: 150,
              borderWidth: 1,
              borderColor: "rgba(0,0,0,0.5)",
              marginTop: 10,
            }}
            placeholder={'Type here'}
            placeholderTextColor={"rgba(198,198,204,1)"}
            onChangeText={(text) => {this.setState({text})}}
            onSubmitEditing={() => {
              realm.write(() => {                 
               realm.create('Cat', {
                  name: this.state.text,
                  birthplace: 'kakogawa',
                  sex: 'male',
                  type: 'American Shorthair',              
                })
              })
              this.setState({text: ''})              
              this._updateData()
            }}
            value={(this.state && this.state.text) || ''}
          />
        </View>
        <View style={styles.list}>
           <ListView
          enableEmptySections={true}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
             />
        </View>        
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  input: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  list: {
    flex: 4,
    justifyContent: 'center',
  }
});
 
AppRegistry.registerComponent('realmTest', () => realmTest);

完成するとこんな感じだよ

Screen Shot 2016-08-23 at 15.08.53

次回は

前回のTodoリストと同様に選んだものを消したり、フラグ管理したりしてみましょう。

細かいことはわからないですが、早速試してみましょう

完成するとこんな感じだよ

次回は

More from my site

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

細かいことはわからないですが、早速試してみましょう

完成するとこんな感じだよ

次回は

More from my site

関連記事

react-nativeでiOSアプリ開発 第15回 react-native drawerもscrollable-tab-viewもreact-native-router-fluxも使いたかった

react-nativeでiOSアプリ開発 第12回 realmをreact-nativeで扱う(2)

react nativeを使ったアプリ開発第6回 ES6記法について

最新記事

台湾法人設立のお知らせ

YouTube動画作成に必要な機材や機能を徹底解説

クリエイタースタジオでInstagramを予約投稿しよう。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

react-nativeでiOSアプリ開発　第15回　react-native drawerもscrollable-tab-viewもreact-native-router-fluxも使いたかった

react-nativeでiOSアプリ開発　第12回　realmをreact-nativeで扱う(2)