React Nativeの AsyncStorage の使い方

「React Native」の「AsyncStorage」の使い方をまとめました。

前回

1. AsyncStorage

「AsyncStorage」は、アプリケーション内でキーとバリューのペアを非同期的に保存および取得するためのAPIです。

🚧 AsyncStorage · React Native

2. データの読み書き

(1) React Nativeプロジェクトの生成。

npx react-native init my_app
cd my_app

(2) パッケージのインストール。

npm install @react-native-async-storage/async-storage

(3) コードの編集と実行。

import React from 'react';
import { Button, View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

// アプリ
const App = () => {

  // データの書き込み
  const onWriteData = async () => {
    try {
      await AsyncStorage.setItem("myKey", "myValue");
    } catch (error) {
      console.error('Error write data: ', error);
    }
  };

  // データの読み込み
  const onReadData = async () => {
    try {
      const value = await AsyncStorage.getItem("myKey");
      if (value !== null) {
        console.log(value);
      }
    } catch (error) {
      console.error('Error read data: ', error);
    }
  };

  // データの削除
  const onDeleteData = async () => {
    try {
      await AsyncStorage.removeItem("myKey");
    } catch (error) {
      console.error('Error delete data: ', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{marginVertical: 10}}>
        <Button title="Write Data" onPress={onWriteData} />
      </View>
      <View style={{marginVertical: 10}}>
        <Button title="Read Data" onPress={onReadData} />
      </View>
      <View style={{marginVertical: 10}}>
        <Button title="Delete Data" onPress={onDeleteData} />
      </View>
    </View>
  );
};

export default App;

次回

Google Gemini 1.5／LlamaIndex／LangChain 人工知能プログラミング実践入門