万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1
      Skycoin:KMqcn7x8REwwzMHPi9fV9fbNwdofYAWKRo

    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();
      }

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

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

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

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

    React Native in Action

    React Native in Action

    React Native: Native Apps parallel fuer Android und iOS entwickeln

    React Native: Native Apps parallel fuer Android und iOS entwickeln

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

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

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

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

    Learning React Native: Building Native Mobile Apps with JavaScript

    Learning React Native: Building Native Mobile Apps with JavaScript

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

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