一：介紹
React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架熔脂，是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物佩研，目前支持iOS和安卓兩大平臺。RN使用Javascript語言霞揉，類似于HTML的JSX旬薯，以及CSS來開發(fā)移動應(yīng)用，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動應(yīng)用開發(fā)領(lǐng)域适秩。
在React Native移動平臺項目開發(fā)中绊序，除了React Native 提供的封裝好的部分插件和原聲組建外硕舆，在實際的項目中還需要使用到很多其他的插件，比如網(wǎng)絡(luò)請求骤公、數(shù)據(jù)庫抚官、相機(jī)、相冊阶捆、通訊錄凌节、視頻播放器、瀏覽器洒试、藍(lán)牙連接刊咳、圖片處理、消息推送儡司、地圖、統(tǒng)計余指、埋點等等APP開發(fā)中需要用到的功能捕犬，都為IDE開發(fā)平臺提供封裝好的插件，以便項目開發(fā)使用酵镜。
另外碉碉，這些博文都是來源于我日常開發(fā)中的技術(shù)總結(jié)，在時間允許的情況下淮韭，我會針對技術(shù)點分別分享iOS垢粮、Android兩個版本，如果有其他技術(shù)點需要靠粪，可在文章后留言蜡吧，我會盡全力幫助大家。這篇文章重點介紹FMDB數(shù)據(jù)庫插件的開發(fā)與使用
源碼Demo獲取方法
如果需要React Native FMDB數(shù)據(jù)庫插件源碼demo占键，歡迎關(guān)注 【網(wǎng)羅開發(fā)】微信公眾號昔善，回復(fù)【64】便可領(lǐng)取。
網(wǎng)羅天下方法畔乙，方便你我開發(fā)君仆，所有文檔會持續(xù)更新，歡迎關(guān)注一起成長牲距！
二：實現(xiàn)思路分析
FMDB數(shù)據(jù)庫插件是需要實現(xiàn)數(shù)據(jù)的新增返咱、查詢、修改牍鞠、刪除等功能咖摹，通過querySQLite方法來實現(xiàn)數(shù)據(jù)的查詢，并將接口提供給Javascript開發(fā)使用
打開默認(rèn)瀏覽器和打開自定義瀏覽器难述，具體的實現(xiàn)思路如下：
新建DataBasePlugin類楞艾，實現(xiàn)RCTBridgeModule協(xié)議
添加RCT_EXPORT_MODULE()宏
添加React Native跟控制器
聲明被JavaScript 調(diào)用的方法
判斷數(shù)據(jù)庫語句参咙，適合使用那個數(shù)據(jù)庫方法
創(chuàng)建數(shù)據(jù)庫DataBase.db
打開數(shù)據(jù)庫
執(zhí)行sql語句
Javascript調(diào)用瀏覽器方法
三：實現(xiàn)源碼分析
1. 新建DataBasePlugin類，實現(xiàn)RCTBridgeModule協(xié)議
新建繼承NSObject的DataBasePlugin類硫眯，并實現(xiàn)RCTBridgeModule協(xié)議
// DataBasePlugin.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface DataBasePlugin : NSObject<RCTBridgeModule>
@end
2. 添加RCT_EXPORT_MODULE()宏
為了實現(xiàn)RCTBridgeModule協(xié)議蕴侧，DataBasePlugin的類需要包含RCT_EXPORT_MODULE()宏。
并在這個宏里面添加一個參數(shù)“DataBasePlugin”用來指定在 JavaScript 中訪問這個模塊的名字两入。
如果你不指定净宵，默認(rèn)就會使用這個 Objective-C 類的名字。
如果類名以 RCT 開頭裹纳，則 JavaScript 端引入的模塊名會自動移除這個前綴择葡。
// DataBasePlugin.m
#import "DataBasePlugin.h"
@implementation DataBasePlugin
RCT_EXPORT_MODULE(DataBasePlugin);
@end
3. 添加React Native跟控制器
如果不添加React Native跟控制器，view將不能正常顯示出來剃氧，實現(xiàn)方法如下：
// DataBasePlugin.m
#import "DataBasePlugin.h"
#import <React/RCTUtils.h>
@implementation DataBasePlugin
RCT_EXPORT_MODULE(DataBasePlugin);
@end
引入<React/RCTUtils.h>之后敏储，在視圖初始化或者顯示的時候，按照如下方法調(diào)用即可
UIViewController *vc = RCTPresentedViewController();
4. 聲明被JavaScript 調(diào)用的方法
React Native需要明確的聲明要給 JavaScript 導(dǎo)出的方法朋鞍，否則 React Native 不會導(dǎo)出任何方法已添。聲明通過RCT_EXPORT_METHOD()宏來實現(xiàn)：
// DataBasePlugin.m
#import "DataBasePlugin.h"
#import <React/RCTUtils.h>
@implementation DataBasePlugin
RCT_EXPORT_MODULE(DataBasePlugin);
RCT_EXPORT_METHOD(execSQLite:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
NSLog(@"數(shù)據(jù)庫常用語句執(zhí)行方法");
}
RCT_EXPORT_METHOD(querySQLite:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
NSLog(@"數(shù)據(jù)庫查詢語句執(zhí)行方法");
}
@end
5. 判斷數(shù)據(jù)庫語句，適合使用那個數(shù)據(jù)庫方法
由于數(shù)據(jù)庫查詢語句中的查詢參數(shù)滥酥，需要通過接口傳入更舞，并不是和sql語句一起傳入，所以需要進(jìn)行拼接坎吻，這就需要用到數(shù)據(jù)庫查詢方法querySQLite缆蝉，因為查詢語句中包含select字符串，因此作出如下判斷：
核心代碼如下：
if([arguments[@"sql"] rangeOfString:@"select"].location !=NSNotFound)
{
failure(@[@{@"resultCode":@"0",@"resultMessage":@"請使用查詢方法querySQLite進(jìn)行查詢"}]);
}
6. 創(chuàng)建數(shù)據(jù)庫DataBase.db
在導(dǎo)入第三方FMDB庫之后瘦真，需要在DataBasePlugin.m引入：
#import "FMDatabase.h"
實現(xiàn)數(shù)據(jù)庫的第一步刊头，創(chuàng)建數(shù)據(jù)表，源碼如下：
- (FMDatabase *)db
{
if (!_db) {
NSString *path = [[self getDocumentPath] stringByAppendingPathComponent:@"DataBase.db"];
_db = [FMDatabase databaseWithPath:path];
}
return _db;
}
7. 打開數(shù)據(jù)庫
判斷數(shù)據(jù)庫表是否已創(chuàng)建诸尽，如果創(chuàng)建成功芽偏，或者已經(jīng)存在數(shù)據(jù)表，即可打開數(shù)據(jù)庫弦讽，源碼如下：
if (self.db) {
if ([self.db open]) {
} else {
failure(@[@{@"resultCode":@"-1",@"resultMessage":@"打開數(shù)據(jù)庫失敗"}]);
}
}else{
failure(@[@{@"resultCode":@"-1",@"resultMessage":@"數(shù)據(jù)庫創(chuàng)建失敗"}]);
}
8. 執(zhí)行sql語句
在創(chuàng)建數(shù)據(jù)表和打開數(shù)據(jù)庫成功之后污尉，對Javascript傳入的sql數(shù)據(jù)庫語句進(jìn)行處理執(zhí)行，源碼如下：
BOOL result = [self.db executeUpdate:sqlString];
if (result) {
completion(@[@{@"status":@"1",@"data":@"執(zhí)行SQL成功"}]);
} else {
failure(@[@{@"resultCode":@"-1",@"resultMessage":@"執(zhí)行SQL失敗"}]);
}
9. Javascript調(diào)用瀏覽器方法
現(xiàn)在從 Javascript 里可以這樣調(diào)用這個方法：
import { NativeModules } from "react-native";
const DataBasePlugin = NativeModules.DataBasePlugin;
DataBasePlugin.execSQLite({sql:"CREATE TABLE IF NOT EXISTS NotificatonTable (id integer PRIMARY KEY AUTOINCREMENT, status text NOT NULL, title text NOT NULL, content text NOT NULL, url text NOT NULL, time text NOT NULL, remark text NOT NULL)"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
