React Native - AsyncStorage

Trong chương này, chúng tôi sẽ chỉ cho bạn cách duy trì dữ liệu của bạn bằng cách sử dụng AsyncStorage.

Bước 1: Trình bày

Trong bước này, chúng tôi sẽ tạo App.js tập tin.

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

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

Bước 2: Logic

Nametừ trạng thái ban đầu là chuỗi rỗng. Chúng tôi sẽ cập nhật nó từ bộ nhớ liên tục khi thành phần được gắn kết.

setName sẽ lấy văn bản từ trường nhập của chúng tôi, lưu nó bằng cách sử dụng AsyncStorage và cập nhật trạng thái.

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

Khi chạy ứng dụng, chúng tôi có thể cập nhật văn bản bằng cách nhập vào trường nhập.