Réagir natif - AsyncStorage
Dans ce chapitre, nous allons vous montrer comment conserver vos données en utilisant AsyncStorage.
Étape 1: Présentation
Dans cette étape, nous allons créer le App.js fichier.
import React from 'react'
import AsyncStorageExample from './async_storage_example.js'
const App = () => {
return (
<AsyncStorageExample />
)
}
export default App
Étape 2: Logique
Namede l'état initial est une chaîne vide. Nous le mettrons à jour à partir du stockage persistant lorsque le composant sera monté.
setName prendra le texte de notre champ de saisie, enregistrez-le en utilisant AsyncStorage et mettre à jour l'état.
async_storage_example.js
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
class AsyncStorageExample extends Component {
state = {
'name': ''
}
componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))
setName = (value) => {
AsyncStorage.setItem('name', value);
this.setState({ 'name': value });
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.textInput} autoCapitalize = 'none'
onChangeText = {this.setName}/>
<Text>
{this.state.name}
</Text>
</View>
)
}
}
export default AsyncStorageExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 5,
height: 100,
borderWidth: 1,
backgroundColor: '#7685ed'
}
})
Lorsque nous exécutons l'application, nous pouvons mettre à jour le texte en tapant dans le champ de saisie.