使用JS寫App完全是一種不一樣的感受回怜，思維方式跟OC編程很不盡相同大年，這篇文章主要來說說使用ReactNative的時候，數(shù)據(jù)是怎么存儲的玉雾，也就是ReactNative數(shù)據(jù)持久化有哪些方案翔试。總結(jié)的主流開發(fā)中一共有5種方案复旬。如果有更好的存儲方式垦缅，可以給我留言。
1.通過RCTRootView的屬性傳值
RCTRootView在初始化的時候驹碍，我們可以從Native這邊通過屬性傳值的方式傳到JS這邊壁涎。這也是最簡單的方式。賦值之后我們也能通過rootView.appProperties設置新的屬性值志秃。
2.AsyncStorage
這是ReactNative官方的數(shù)據(jù)存儲方式怔球，采用鍵值對存儲的方式，類似于OC中的NSUserDefaults.但是必須區(qū)分的是他和NSUserDefaults存儲的區(qū)域是不一樣的浮还。如果老項目中使用的是NSUserDefaults存儲的數(shù)據(jù)竟坛，想要通過AsyncStorage來取數(shù)據(jù)，我們是取不到數(shù)據(jù)的碑定。需要注意的是流码，AsyncStorage是只能存字符串的，如果你想存放數(shù)字或其他類型的數(shù)據(jù)延刘，那就要轉(zhuǎn)換為字符串再存放吧漫试，這樣看起來，AsyncStorage確實沒有那么方便了碘赖。其實NSUserDefaults也有點類似驾荣，NSUserDefaults是可以存放字符串和NSNumber類型的數(shù)據(jù)的。下面說說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里取數(shù)據(jù)，那么我們是不是就不能取NSUserDefaults的數(shù)據(jù)呢撼班，答案肯定是可以取的歧匈，存取的方式就需要我們自己來寫橋接方式了。這里涉及到Native與JS的通信了砰嘁，有關這方面的詳細知識我會在下一個文檔詳細說明件炉。先貼代碼吧：
OC:
#import "RCTBridgeModule.h"
@interface RCTSQLManager : NSObject<RCTBridgeModule>
@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
前面講述的比較適合存放小并且簡單的數(shù)據(jù)勘究，如果你想存放數(shù)據(jù)結(jié)構(gòu)復雜的數(shù)據(jù)的時候，就不適合了斟冕，這個時候我們就會想起sqlite口糕，sqlite這種跨平臺的數(shù)據(jù)存儲方式在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是一個非常優(yōu)秀的存儲方式景描，這里就不贅述了，官網(wǎng)有很詳細的使用方法秀撇。但是有點遺憾的是超棺，在react-native中只支持iOS8以上。
微博賬號：梅嘉慶（點擊關注）
