前言
因为 实战项目系列 涉及到数据持久化,这边就来补充一下。
如本文有错或理解偏差欢迎联系我,会尽快改正更新!
如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我。
数据持久化
数据持久化一直都是软件开发中重要的一个环节,几乎所有的应用都具备这一项功能;那什么是数据持久化呢?—— 说白了就是数据的本地化存储,将数据存储到本地,在需要的时候进行调用。
这边我们介绍两种在 React-Native 中比较常用的存储方式
AsyncStorage:这是官方使用的存储方式,类似于 iOS 中的 NSUserDefault ,区别在于,AsyncStorage 只能存储 字符串键值对,而 NSUserDefault 可以存储 字符串和number。
Realm:今天才发现 Realm 也已经支持 React-Native ,这是新兴的移动端数据存储方式,在没有它之前,一直都是使用 sqlist 进行数据存储,在性能上,各有优势,但是操作上,Realm 有着明显优势,更方便使用。
接下来我们就来看看怎么使用它们。
AsyncStorage 简单使用
AsyncStorage方法官方文档写得很详细,这边就不对赘述了!
AsyncStorage 使用方法很简单,我们就直接上代码:
// 增加
createData() {
AsyncStorage.setItem('name', JSON.stringify('吉泽明步'), (error, result) => {
if (!error) {
this.setState({
data:'保存成功!'
})
}
});
}
// 查询
inquireData() {
AsyncStorage.getItem('name')
.then((value) => {
let jsonValue = JSON.parse((value));
this.setState({
data:jsonValue
})
})
}
// 更新
upData() {
AsyncStorage.setItem('name', JSON.stringify('苍井空'), (error, result) => {
if (!error) {
this.setState({
data:'更新成功!'
})
}
});
}
// 删除
removeData() {
AsyncStorage.removeItem('name');
this.setState({
data:'删除完成!'
})
}
AsyncStorage效果演示.gif
按照官方推荐,我们使用 AsyncStorage 前,最好进行一层封装,React-Native中文网 给我们提供了一个比较好的框架 —— react-native-storage,我们可以直接使用它,方法很简单,说明文档中说得很详细。
既然是第三方框架,那么第一部肯定就是导入到我们的工程中:
npm install react-native-storage --save
接着,我们根据创建一个 Storage 文件专门对框架进行初始化操作:
import {
AsyncStorage,
} from 'react-native';
// 第三方框架
import Storage from 'react-native-storage';
var storage = new Storage({