ローディング中

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

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

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

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

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

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

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

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

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

 


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リストと同様に選んだものを消したり、フラグ管理したりしてみましょう。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.