Native reagieren - AsyncStorage

In diesem Kapitel zeigen wir Ihnen, wie Sie Ihre Daten mit beibehalten können AsyncStorage.

Schritt 1: Präsentation

In diesem Schritt erstellen wir die App.js Datei.

import React from 'react'
import AsyncStorageExample from './async_storage_example.js'

const App = () => {
   return (
      <AsyncStorageExample />
   )
}
export default App

Schritt 2: Logik

Namevom Ausgangszustand ist leere Zeichenfolge. Wir werden es aus dem persistenten Speicher aktualisieren, wenn die Komponente bereitgestellt wird.

setName nimmt den Text aus unserem Eingabefeld und speichert ihn mit AsyncStorage und aktualisieren Sie den Status.

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

Wenn wir die App ausführen, können wir den Text aktualisieren, indem wir in das Eingabefeld eingeben.