📜  React Native-AsyncStorage

📅  最后修改于: 2020-12-08 06:14:20             🧑  作者: Mango


在本章中,我们将向您展示如何使用AsyncStorage持久化数据。

步骤1:简报

在此步骤中,我们将创建App.js文件。

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

const App = () => {
   return (
      
   )
}
export default App

步骤2:逻辑

初始状态下的名称为空字符串。装入组件后,我们将从持久性存储中对其进行更新。

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 (
         
            
            
               {this.state.name}
            
         
      )
   }
}
export default AsyncStorageExample

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
   textInput: {
      margin: 5,
      height: 100,
      borderWidth: 1,
      backgroundColor: '#7685ed'
   }
})

运行应用程序时,可以通过在输入字段中键入来更新文本。

反应本机AsyncStorage