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