ReactNativeでAsyncStorageの使い方

もくじ

 

説明

使い所としてはAPI叩いて登録済みユーザーのIDを取得しAsyncStorageにセットして、ログイン後のページに遷移するとか、そういった局面。んで、ログイン後は、AsyncStorageにセットしてあるデータをゲットして、ゲットしたユーザーIDを元に、apiを叩いてユーザーの詳細なデータを取得するとか、そういった感じで使える。

実装

例えば、下記のようにボタンを押したら_signInAsyncを稼働させるようにする

<Button title="Sign in!" onPress={this._signInAsync} />

んで、_signInAsyncの中でAsyncStorage.setItemをする。

_signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('App');
};
}

登録したAsyncStorageを見たければ、例えばこんな風にする

componentWillMount() {

AsyncStorage.getItem('userToken', (err, result) => {
console.log(result);
});

}

ログインしてるか、ログインしてないかで処理を分けて見せる画面を分けたいなどをしたい場合は、例えばこうする。これに関しては、認証フローreact nativeとかで検索するといい。

_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');
console.log(userToken)

this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};

 

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です