ReactNative数据持久化的五种方式

来源：互联网发布：json插件编辑：程序博客网时间：2024/06/01 23:37

转载http://www.jianshu.com/p/0010aea78e10

使用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<RCTBridgeModule>@end@implementation RCTSQLManagerRCT_EXPORT_MODULE();// Available as NativeModules.SQLManager.getUserDefaultsRCT_EXPORT_METHOD(getUserDefaults:(NSString *)inputValue callback:(RCTResponseSenderBlock)callback){  NSString *ret = [[NSUserDefaults standardUserDefaults]objectForKey:inputValue];  NSLog(@"ret = %@",ret);  if(!ret){    ret = @"";  }  callback(@[ret]);}@endJS: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以上。

文／梅庆（简书作者）
原文链接：http://www.jianshu.com/p/0010aea78e10
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

0 0