一、项目背景
最近的项目中,遇到一个问题,用户初次进入一个RN页面,会有一个toast弹框提示,业务的要求是这个toast提示只要展示一次就好了,如果每次用户进来都提示,体验会非常不友好。
经过一番尝试后,了解到了React Native中的提供一个本地存储API-->AsyncStorage
。我们给出的解决方案是,用户点击关闭toast弹框后,以后不管是重新登陆还是重新运行程序,这个toast弹框都不再展示。(出得卸载客户端重新安装)
二、AsyncStorage简介
基本概念
AsyncStorage
是一个简单的、异步的、持久化的 Key-Value 存储系统,它对于 App 来说是全局性的。可用来代替 LocalStorage。
在 iOS 上,AsyncStorage
在原生端的实现是把较小值存放在序列化的字典中,而把较大值写入单独的文件。在 Android 上,AsyncStorage
会尝试使用RocksDB,或退而选择 SQLite。
本模块的 JS 代码提供了对原生实现的一个封装,以提供一个更清晰的 JS API、抛出真正的Error
对象,以及简单的单项对象操作函数。每个方法都会返回一个Promise
对象。
AsyncStorage
只能用来储存字符串数据,所以为了去储存object类型的数据,得先进行序列化(JSON.stringify()
)当你想要使用数据的时候,就可以使用JSON.parse()
。
常用方法
getItem()
js
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)
读取key
字段并将结果作为第二个参数传递给callback
。如果有任何错误发生,则会传递一个Error
对象作为第一个参数。返回一个Promise
对象。
参数:
名称 | 类型 | 必需 | 说明 |
---|---|---|---|
key | string | 是 | 要读取的字段名 |
callback | ?(error: ?Error, result: ?string) => void | 否 | 读取完成后的回调函数(不建议使用) |
setItem()
js
static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
将key
字段的值设置成value
(注意 value 必须是字符串值,非字符串数据必须先序列化为字符串),并在完成后调用callback
函数。如果有任何错误发生,则会传递一个Error
对象作为第一个参数。返回一个Promise
对象。
参数:
名称 | 类型 | 必需 | 说明 |
---|---|---|---|
key | string | 是 | 要写入的字段名 |
value | string | 是 | 要写入key 字段的值 |
callback | ?(error: ?Error) => void | 否 | 发生错误时的回调函数 |
removeItem()
js
static removeItem(key: string, [callback]: ?(error: ?Error) => void)
删除一个字段。返回一个Promise
对象。
参数:
名称 | 类型 | 必需 | 说明 |
---|---|---|---|
key | string | 是 | 要删除的字段名。 |
callback | ?(error: ?Error) => void | 否 | 发生错误时的回调函数 |
三、使用
导入AsyncStorage
js
import { AsyncStorage } from 'react-native';//新版本的RN已经将AsyncStorage移除了,建议使用下面方法引入
import AsyncStorage from '@react-native-async-storage/async-storage'
代码示例
js
import AsyncStorage from '@react-native-async-storage/async-storage'
export default class A extends Component{
constructor(props){
super(props);
this.state = {
tipsVisible: true //是否显示toast弹框标志,默认true,第一次进入显示
}
}
componentDidmount(){
//每次进入页面都要获取AsyncStorage中存储的tips值,如果为1,代表用户手动关闭了弹框,以后不再展示,将tipsVisible赋值为false
AsyncStorage.getItem('tip').then(res =>{
console.log(res, 'res')
this.setState({
tipsVisible: res === '1' ? false : true
})
})
}
//点击toast弹框方法
hanldeHideTips(){
this.setState({
tipsVisible: false //关闭弹框
})
AsyncStorage.setItem('tips', '1') // 给AsyncStorage中tips赋值为1
}
render(){
return(
<View>
{this.state.tipsVisible ? (<TouchableOpacity onPress={this.hanldeHideTips()}>
<Label text={'关闭'} />
</TouchableOpacity> ) : null
}
</View>
)
}
}