ReactNativeに入門したので記録4(AsyncStorageを使ってみる)

この記事でやること

  • AsyncStorageがなんなのかざっくり知る
  • AsyncStorageのサンプル作ってみる

AsyncStorageがなんなのかざっくり知る

  • シンプルで永続可能なKVS
  • iOSAndroidで内部の挙動が異なる(詳細は公式ドキュメント)

AsyncStorageの使い方

  1. AsyncStorageライブラリをインポートする
  2. AsyncStorage # setItem()でキーとその値を登録する
  3. AsyncStorage # getItem()で指定したキーの値を取得する

他にもキーを削除したり、jsonの値をもつキーその1とキーその2をマージするメソッドがあるみたいなんですけど、今日はこれだけ。

公式ドキュメントはこちら

AsyncStorageのサンプル作ってみる

すでにGitHub上にある他の人が作ったサンプルは試したんですけど、もっとシンプルなものがよかったので自分で書きました。

本当はボタンの幅を画面横幅の半分くらいに狭めたかったんだけど試してもできず。。単純に、SET KEYボタンを押すとkeyとvalueが登録されて、GET KEYボタンを押すとconsoleに登録されたキーの値が表示されるやつ。

import React, { Component } from 'react';
import {
  Text,
  Button,
  View,
  AsyncStorage
} from 'react-native';

export default class AsyncStorageExample extends Component {

  async setKey() {
    try {
      await AsyncStorage.setItem('testKey', 'testValue');
      console.log('success to set key and value.');
    } catch (error) {
      console.log("Error retrieving data" + error);
    }
  }

  async getKey() {
    try {
      const value = await AsyncStorage.getItem('testKey');
      if(value !== null){
        console.log(`value is ${value}.`);
      }else{
        console.log('value is not registered.');
      }
    } catch (error) {
      console.log("Error resetting data" + error);
    }
  }

  render() {
    return (
      <View >
        <Text>
          Put this button to set key and value!
        </Text>

        <Button
          onPress={this.setKey}
          title="set Key"
          color="#2196f3"
          accessibilityLabel="SET"
        />

        <Button
          onPress={this.getKey}
          title="get Key"
          color="#f44336"
          accessibilityLabel="GET"
        />
      </View>
    );
  }
}