使用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 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以上。

微博賬號：梅嘉慶（點擊關注）