Reactnative存储数据组件AsyncStorage

• AsyncStorage是一个简单的，未加密的，异步的，持久的键值存储系统
• AsyncStorage是一个全局的存储系统，没有实例这一概念，要存储数据就要往里面扔，要读取数据就发起请求
• AsyncStorage对外提供了简单的JavaScript接口，每一个接口都是异步的，每一个接口都返回一个Promise对象
  Reactnative存储数据组件AsyncStorage需要安装组件
  npm i @react-native-community/async-storage
  引入组件
  import AsyncStorage from ‘@react-native-community/async-storage’;
  案例

import React, { Component } from 'react'
import { Text, View, Alert,TextInput, StyleSheet,TouchableHighlight } from 'react-native'
import AsyncStorage from '@react-native-community/async-storage';

export default class App extends Component {
   state = {
      'name': '老陈，你胖吗？',
      'inputText':'不是清楚，最近体重称坏了，会多转1圈，才显示十几斤',
   }

   async readName() {
        try {
         //   读取数据
          const value = await AsyncStorage.getItem('name')
          if(value !== null) {
              this.setState({ 'name': value })
          }
          Alert.alert("读取数据成功")
        } catch(e) {
          console.log(e);
          Alert.alert("读取数据失败!")
        }
   }

   setName = () => {
      // 保存数据
      AsyncStorage.setItem('name', this.state.inputText);
      Alert.alert("保存成功!")
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput 
              style = {styles.textInput} 
              autoCapitalize = 'none' 
              value={this.state.inputText} />
            <View style={{flexDirection:'row'}}>
                <TouchableHighlight style={[styles.button,{marginRight:8}]} onPress={this.setName}>
                    <Text style={styles.buttonTxt}>保存</Text>
                </TouchableHighlight>
                <TouchableHighlight style={[styles.button,{backgroundColor:'blue'}]} onPress={this.readName.bind(this)}>
                    <Text style={styles.buttonTxt}>读取</Text>
                </TouchableHighlight>
            </View>
            <View style={{marginTop:8}}>
                <Text>当前的值：{this.state.name}</Text>
            </View>
         </View>
      )
   }
}

const styles = StyleSheet.create ({
   container: {
      margin:10
   },
   textInput: {
      margin: 5,
      height: 44,
      width:'100%',
      borderWidth: 1,
      borderColor: '#dddddd'
   },
   button: {
      flex:1,
      height:44,
      justifyContent:'center',
      alignItems:'center',
      width:100,
      backgroundColor: 'red'
   },
   buttonTxt:{
      justifyContent:'center',
      color:'#ffffff'
   }
})