[react-native]AsyncStorageの使い方

AsyncStorageとは？

AsyncStorageはreactnativeにおいてデータを永続的に保存を可能とするライブラリの一つです。
reactnative公式では非推奨ですが、expoではまだ推奨しているので勉強してみました。
DBに保存したりいろんな方法でデータの永続化は可能ですが、今回はスマホのストレージに保存するやり方です。

基本的な使い方

・AsyncStorage.setItem(key, value);
・AsyncStorage.getItem(key);
setItemでキーを指定して保存
getItemでキーを指定して取得
といった流れです。実際に試してみます。

App.js

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

export default class App extends React.Component {
  state = {
    num1: 1,
    num2: 2,
  }
  render() {
    const setData = async (no, value) => {
      try {
        await AsyncStorage.setItem(no, value);
      } catch (error) {
        console.log(error);
      }

    }
    const getData = async (no) => {
      try {
        const value = await AsyncStorage.getItem(no);
        switch (no) {
          case "1":
            this.setState({ num1: value })
            break;
          case "2":
            this.setState({ num2: value })
            break;
          default:
        }
      } catch (error) {
        console.log(error);
      }
    }
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <Text style={styles.textStyle}>No1: {this.state.num1}</Text>
          <Button title="getNo1" onPress={() => { getData('1') }} />
          <Button title="setNo1" onPress={() => { setData('1', '11') }} />
        </View>
        <View style={styles.row}>
          <Text style={styles.textStyle}>No2: {this.state.num2}</Text>
          <Button title="getNo2" onPress={() => { getData('2') }} />
          <Button title="setNo2" onPress={() => { setData('2', '22') }} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  textStyle: {
    fontSize: 20,
  }

});

配列での使い方

App.js

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

export default class App extends React.Component {
  state = {
    array: [{
      no: "-1"
    }],
  }
  render() {
    const setData = async (data) => {
      try {
        for (var i in data) {
          await AsyncStorage.setItem(i, JSON.stringify(data[i]));
        }
      } catch (error) {
        console.log(error);
      }
    }
    const getData = async (data) => {
      try {
        for (var i in data) {
          var value = await AsyncStorage.getItem(i);
          console.log(JSON.parse(value).no);
        }
      } catch (error) {
        console.log(error);
      }
    }
    const arrayPush = () => {
      this.state.array.push({ no: this.state.array.length })
    }
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <Button title="arrayPush" onPress={() => { arrayPush() }} />
          <Button title="getarray" onPress={() => { getData(this.state.array) }} />
          <Button title="setarray" onPress={() => { setData(this.state.array) }} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  textStyle: {
    fontSize: 20,
  }
});

setするときは0~の数字でkeyを設定
取得するときも0~の数字で取得
といった流れです。
また、JSONを使うことで要素の値も簡単に取り出せます！

まとめ

大規模なシステム向けではないと思いますが、
簡単なアプリであれば簡単に組むことができます。
知っておくといいかも？