React Native

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

 

Pocket
LinkedIn にシェア

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

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

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-React Native