React Native - 异步存储

• 

  简述

  在本章中，我们将向您展示如何使用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'
     }
  })
  

  当我们运行应用程序时，我们可以通过在输入字段中输入来更新文本。