4.RN将数据存储到本地19-11-19

对input中的值进行储存，获取，删除操作

import React, { Component } from "react";
import {
  View,
  Image,
  TouchableOpacity,
  Button,
  Text,
  AsyncStorage,
  TextInput,
} from "react-native";

const KEY="save_key";
class AsyncStoragePage extends Component {
  constructor(props){
    super(props);
    this.state={
      showText:''
    }
  }
  render() {
    const userStore = this.props["domain.user"];
    const navigation = this.props.navigation;
    return (
      <View>
        <Text>{this.state.showText}</Text>
        <TouchableOpacity style={{backgroundColor: '#caa',width:100,height:50}} onPress={()=>{
          this.loadData();
        }}/>

        <TextInput
           style={{height:50,width:370,backgroundColor:'#aaa'}}
           onChangeText={text => {
             this.value=text;
           }}
        />
        <View style={{}}>
          <Button title={"存储"} style={{backgroundColor: '#acc',width:100,height:50}} onPress={()=>{
            this.doSave();
          }}/>
          <Button title={"删除"} style={{backgroundColor: '#acc',width:100,height:50}} onPress={()=>{
            this.doRemove();
          }}/>
          <Button title={"获取"} style={{backgroundColor: '#acc',width:100,height:50}} onPress={()=>{
            this.getData();
          }}/>
        </View>
      </View>
    );
  }
  doSave(){
    // 用法一
    // AsyncStorage.setItem(KEY, this.value ,error => {
    //   error && console.log(error.toString());
    // })
    // 用法二
    AsyncStorage.setItem(KEY, this.value)
      .catch(error => {
        error && console.log(error.toString())
      })
    // 用法三
    // try {
    //   await AsyncStorage.setItem(KEY, this.value)
    // } catch (error) {
    //   error && console.log(error.toString())
    // }
  }

  doRemove(){
    // AsyncStorage.removeItem(KEY, (error: ?Error) => {
    //   error && console.log(error.toString());
    // })
    // 用法二
    AsyncStorage.removeItem(KEY)
      .catch(error => {
        error && console.log(error.toString())
      })
    // 用法三
    // try {
    //   await AsyncStorage.removeItem(KEY)
    // } catch (error) {
    //   error && console.log(error.toString())
    // }


  }
  getData(){
    // AsyncStorage.getItem(KEY, (error, value) => {
    //     this.setState({
    //       showText: value
    //     });
    //     console.log(value);
    //     error && console.log(error.toString());
    // })
    // 用法二
    AsyncStorage.getItem(KEY)
      .then(value => {
        this.setState({
          showText: value
        })
        console.log(value)
      })
      .catch(error => {
        error && console.log(error.toString())
      })
    // 用法三
    // try {
    //   const value = await AsyncStorage.getItem(KEY)
    //   this.setState({
    //     showText: value
    //   })
    //   console.log(value)
    // } catch(error) {
    //   error && console.log(error.toString())
    // }
  }

  loadData(){
    fetch('http://web.juhe.cn:8080/constellation/getAll?consName=%E5%8F%8C%E5%AD%90%E5%BA%A7&type=today&key=46dd5530ed37e3aa19019edfa1d6de3d')
      .then(response => {
        if (response.ok){
          return response.text();
        }
        throw new Error('Network response was not ok.');
      })
      .then(responseText => {
        this.setState({
          showText: responseText
        })
      })
      .catch(e =>{
        this.setState({
          showText:e.toString()
        })
      })
  }
}

AsyncStoragePage.navigationOptions =({ navigation }) => ( {
  title: 'Help',
  // headerLeft: (
  //   <View style={{ marginLeft: 15 }}>
  //     <TouchableOpacity onPress={() => navigation.goBack()}>
  //       <Image source={require('../../assets/images/profile_pic/baseline-chevron_left_back.png')}/>
  //     </TouchableOpacity>
  //   </View> ),
  headerTitleStyle: {
    alignSelf: "center",
    textAlign: "center",
    flex: 1
  },
});
export default AsyncStoragePage;