React-Native之AsyncStorage和react-native-easy-toast

1:常用方法

getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果值作为参数传入第二个callback方法。如果发生错误,会把Error对象传入callback方法。该方法最终返回一个Promise对象

setItem(key:string,value:string,callback?:?(error:?Error)=>void) 静态方法,该根据key字段设置value内容,完成之后进行回调callback方法。如果发生错误会把Error对象传入callback方法中。该方法返回一个Promise对象。

removeItem(key:string,callback?:?(error:?Error)=>void) 静态方法,根据key进行删除值,成功之后进行回调callback方法。如果发生错误会把Error对象传入callback方法中。该方法返回一个Promise对象。

2:带有的方法

  • static getItem(key:string , callback:(error,result)): 根据键来获取值,获取的结果会在回调函数中。
  • static setItem(key:string , value:string , callback:(error)): 设置键值对。
  • static removeItem(key:string , callback:(error)): 将根据键移出一项
  • static mergeItem:(key:string , value:string , callback:(error)): 合并现有的值和输入值。
  • static clear(callback:(error)): 清除所有的项目。
  • static getAllKeys(callback:(error)): 获取所有的键。
  • static multiGet(keys,callback:(errors,result)):获取多项,其中keys是字符串数组。
  • static multiSet(keyValuePairs,callback:(errors)):设置多项,其中keyValuePairs是字符串的二维数组。
  • static multiRemove(keys,callback(errors)):删除多项,其中keys是字符串数组。
  • static multiMerge(keyValuePairs,callback:(errors)):多个键值合并,其中keyValuePairs是字符串中的二维数组。

3:安装react-native-easy-toast(简单提示框)

    地址:https://github.com/crazycodeboy/react-native-easy-toast/blob/master/README.zh.md

4:代码

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    AsyncStorage,
} from 'react-native';

import Toast,{DURATION} from 'react-native-easy-toast';//导入弹出框组件
const KEY='text';//指定key

type Props = {};
export default class AsyncStorageTest extends Component {
    constructor(props) {
        super(props);
    }

    //保存
    save() {
        AsyncStorage.setItem(KEY, this.text, (error)=> {  //设置键值对 key:value  
            if (!error) {
                this.toast.show('保存成功', DURATION.LENGTH_LONG);//设置提示框,并设置持续时间
            } else {
                this.toast.show('保存失败', DURATION.LENGTH_LONG);
            }
        });
    }
    //取出
    get() {
        AsyncStorage.getItem(KEY, (error, result)=> {
            if (error) {
                this.toast.show('取出失败', DURATION.LENGTH_LONG);
            } else {
                if (result) {
                    this.toast.show('取出的结果为:' + result, DURATION.LENGTH_LONG);
                } else {
                    this.toast.show('没有找到对应的内容', DURATION.LENGTH_LONG);
                }
            }
        });
    }
    //移除
    remove(){
        AsyncStorage.removeItem(KEY,(error)=>{
            if (!error) {
                this.toast.show('移除成功', DURATION.LENGTH_LONG);
            } else {
                this.toast.show('移除失败', DURATION.LENGTH_LONG);
            }
        });
    }
    render() {
        return (
            
                 {
                               this.text = text;
                           }}
                />
                
                    this.save()}>
                        保存
                    
                    this.remove()}>
                        移除
                    
                    this.get()}>
                        取出
                    
                
                 {//提示框展示位置
                    this.toast = toast
                }}/>
            
        )
    }
}
const styles = StyleSheet.create({
    text: {
        fontSize: 20,
        margin:10
    }
});

5:效果图

React-Native之AsyncStorage和react-native-easy-toast_第1张图片React-Native之AsyncStorage和react-native-easy-toast_第2张图片

你可能感兴趣的:(React-Native)