ReactNativeのAsyncStorageの使い方

AsyncStorageはデータを永続化するためのもの。 TypeScriptにて使用してます。

メソッドやstateなどの定義定義

インポートする。

import { AsyncStorage } from "react-native"

stateの定義

今回扱う変数をstateで行うのでstateを定義します。 myStateの名前は任意です。 今回string型にしましたが自分の好きな型にしても構いません。

interface IDetailScreenState {
  myState: string,
}

コンストラクタ

myStateは任意です。 stateに使います。

  constructor(props: any) {
    super(props);

    this.state = {
      myState: "初期値",
    };
  }

保存メソッド

"キー"となっているところは任意です。

  async setItem(value: string) {
    try {
      await AsyncStorage.setItem("キー", value);
    } catch (error) {
      // エラー時の処理
    }
  }

取得メソッド

"キー"となっているところは任意です。 先程の保存時と共通のものにしてください。

  async getItem() {
    try {
      const value = await AsyncStorage.getItem("キー");
      if (value !== null) {
        this.setState({myState: value});
      }
    } catch (error) {
      // エラーになった時の処理
    }
  }

使用する

先程定義したメソッドを使います。

保存の呼びだし

こんな感じでボタンを押下した時の処理を呼びます。

  onPress(value: any) {
    this.setState({myState: value});

    // さっきの保存メソッドを呼ぶ.
    this.setItem(value);
  }

取得のメソッド呼び出し

私はconstructorに前回保存した時の値を取得する処理を入れました。

先程のconstructorに追記しました。

  constructor(props: any) {
    super(props);

    this.state = {
      myState: "初期値",
    };

    // これを追記した。
    this.getItem();
  }

Android/iOSクロス開発フレームワーク React Native入門

ミクシィ公認 スマホアプリ開発実践ガイド［iOS/Android両対応］

HTML5 スマホアプリ開発の教科書

React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~

React Nativeで初めるiOS・Androidクロスプラットフォームアプリ開発入門 - その１

React Nativeで初めるiOS・Androidアプリ開発入門 - その2

React Native入門 - Expoではじめる - iOS・Androidアプリ開発入門 (1)

React Native in Action

React Native Cookbook - Second Edition: Industry standard recipes to solve all your problems with React Native Development (English Edition)

React Native: Native Apps parallel fuer Android und iOS entwickeln

React Native Cookbook: Bringing the Web to Native Platforms (English Edition)

React Native By Example: Native mobile development with React (English Edition)

Learning React Native: Building Native Mobile Apps with JavaScript

React: Cross-Platform Application Development with React Native: Build 4 real-world apps with React Native (English Edition)

Seven Mobile Apps in Seven Weeks: Native Apps, Multiple Platforms (Pragmatic Programmer) (English Edition)

React Native - Building Mobile Apps with JavaScript: Build real-world iOS and Android native apps with JavaScript (English Edition)

Practical React Native: Build Two Full Projects and One Full Game using React Native