React Nativeの AsyncStorage の使い方
「React Native」の「AsyncStorage」の使い方をまとめました。
前回
1. AsyncStorage
「AsyncStorage」は、アプリケーション内でキーとバリューのペアを非同期的に保存および取得するためのAPIです。
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;