प्रतिक्रियाशील मूल - AsyncStorage

इस अध्याय में, हम आपको दिखाएंगे कि कैसे अपने डेटा का उपयोग करना जारी रखें AsyncStorage

चरण 1: प्रस्तुति

इस चरण में, हम बनाएंगे App.js फ़ाइल।

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

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

चरण 2: तर्क

Nameप्रारंभिक अवस्था से खाली स्ट्रिंग है। घटक के माउंट होने पर हम इसे लगातार भंडारण से अपडेट करेंगे।

setName हमारे इनपुट फ़ील्ड से टेक्स्ट को ले जाएगा, इसका उपयोग करके सहेजें AsyncStorage और राज्य को अद्यतन करें।

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

जब हम ऐप चलाते हैं, तो हम इनपुट फ़ील्ड में टाइप करके टेक्स्ट को अपडेट कर सकते हैं।