【React Native】AsyncStorageを用いたユーザ情報の保存と取得

React Nativeでアプリを作ってみようと取り組んで、AsyncStorageで躓いたのでメモ

React Native

React Nativeは、JavaScriptのみを使用してモバイルアプリを構築できます。
Reactと同じデザインを使用しているため、宣言型コンポーネントを使用してリッチなモバイルUIを作成できます。
facebook.github.io

AsyncStorage

AsyncStorageは、DBを使わずに簡単なデータを保存することができます。

• AsyncStorageのライブラリをインポート

import { AsyncStorage } from 'react-native';

• 今回保存したい情報

      buta: {
              name: "ぶた",
              img: require('./img/buta.png'),
              point: 100
            }

• データの保存 AsyncStorage.setItem('key','value');

ブタさんの情報を保存する
JSON.stringify(buta))は、今回ブタのユーザ情報が配列で格納されているので、JSON文字列に変換

saveButa = async (buta) => {
try{
    await AsyncStorage.setItem('buta',JSON.stringify(buta));
   }catch(error){
     console.log(error);
   }
       }

• データの取得 AsyncStorage.getItem('key');

ブタさんの情報を取得する
取得したブタさん情報の文字列に対してJSON.parse(butaString)を呼び出して配列を取得

loadButa = async () => {
try{
  const butaString = await AsyncStorage.getItem('buta');
  if(butaString){
    const buta = JSON.parse(butaString)
            this.setState({buta: buta})
             }
             }catch(error){
               console.log(error);
             }
           }

最後に

今後は、位置情報やFirebaseを利用してアプリを実用的な物にしてきたい。