native数据类型 react_ReactNative数据持久化方案

使用JS写App完全是一种不一样的感受,思维方式跟OC编程很不尽相同,这篇文章主要来说说使用ReactNative的时候,数据是怎么存储的,也就是ReactNative数据持久化有哪些方案。总结的主流开发中一共有5种方案。如果有更好的存储方式,可以给我留言。

1.通过RCTRootView的属性传值

RCTRootView在初始化的时候,我们可以从Native这边通过属性传值的方式传到JS这边。这也是最简单的方式。赋值之后我们也能通过rootView.appProperties设置新的属性值。

2.AsyncStorage

这是ReactNative官方的数据存储方式,采用键值对存储的方式,类似于OC中的NSUserDefaults.但是必须区分的是他和NSUserDefaults存储的区域是不一样的。如果老项目中使用的是NSUserDefaults存储的数据,想要通过AsyncStorage来取数据,我们是取不到数据的。需要注意的是,AsyncStorage是只能存字符串的,如果你想存放数字或其他类型的数据,那就要转换为字符串再存放吧,这样看起来,AsyncStorage确实没有那么方便了。其实NSUserDefaults也有点类似,NSUserDefaults是可以存放字符串和NSNumber类型的数据的。下面说说AsyncStorage的使用方法。

var keyName = 'myname';

var keyValue = 'qing';

AsyncStorage.setItem(keyName,keyValue,function(errs){

//TODO:错误处理

if (errs) {

console.log('存储错误');

}

if (!errs) {

console.log('存储无误');

}

});

var _this = this;

AsyncStorage.getItem(keyName,function(errs,result){

//TODO:错误处理

if (!errs) {

var num = parseInt(result, 10); //returns 10

console.log('result = '+num);

_this.setState({

text:'dafd'

});

console.log('result = '+_this.state.text);

}

});

AsyncStorage.removeItem(keyName,function(errs) {

if (!errs) {

console.log('移除成功');

}

});

3.NSUserDefaults

ReactNative中是无法使用NSUserDefaults的,但有的时候我们想从之前有的APP里取数据,那么我们是不是就不能取NSUserDefaults的数据呢,答案肯定是可以取的,存取的方式就需要我们自己来写桥接方式了。这里涉及到Native与JS的通信了,有关这方面的详细知识我会在下一个文档详细说明。先贴代码吧:

OC:

#import "RCTBridgeModule.h"

@interface RCTSQLManager : NSObject

@end

@implementation RCTSQLManager

RCT_EXPORT_MODULE();

// Available as NativeModules.SQLManager.getUserDefaults

RCT_EXPORT_METHOD(getUserDefaults:(NSString *)inputValue callback:(RCTResponseSenderBlock)callback)

{

NSString *ret = [[NSUserDefaults standardUserDefaults]objectForKey:inputValue];

NSLog(@"ret = %@",ret);

if(!ret){

ret = @"";

}

callback(@[ret]);

}

@end

JS:

SQLManager.getUserDefaults('name', (text) => {

console.log('userDefaults='+text);

});

4.react-native-sqlite

前面讲述的比较适合存放小并且简单的数据,如果你想存放数据结构复杂的数据的时候,就不适合了,这个时候我们就会想起sqlite,sqlite这种跨平台的数据存储方式在ReactNative里也有对应的方式,那就是react-native-sqlite。点这里可以进行下载

sqlite.open("filename.sqlite", function (error, database) {

if (error) {

console.log("Failed to open database:", error);

return;

}else {

console.log('open sucess');

}

建表

var sql = "CREATE TABLE UserTable(field varchar(255),LastName varchar(255))";

database.executeSQL(sql, [], rowCallback, completeCallback);

function rowCallback(rowData) {

console.log("createTable:", rowData);

}

查询

var sql = "SELECT * FROM UserTable";

database.executeSQL(sql, [], rowCallback, completeCallback);

function rowCallback(rowData) {

console.log("Got row data:", rowData);

}

插入

var insertsql = "insert into UserTable VALUES ('qing', 'Mei')";

database.executeSQL(insertsql, [], rowCallback, completeCallback);

function rowCallback(rowData) {

console.log("insert:", rowData);

}

删除

var deleSql = "DELETE FROM UserTable WHERE LastName = ?";

var params = ["Mei"];

database.executeSQL(deleSql, params, rowCallback, completeCallback);

function rowCallback(rowData) {

console.log("delete:", rowData);

}

function completeCallback(error) {

if (error) {

console.log("Failed to execute query:", error);

return

}

console.log("Query complete!");

database.close(function (error) {

if (error) {

console.log("Failed to close database:", error);

return

}

});

}

Realm

Realm是一个非常优秀的存储方式,这里就不赘述了,官网有很详细的使用方法。但是有点遗憾的是,在react-native中只支持iOS8以上。

微博账号:梅嘉庆(点击关注)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值