iOS--React Native FMDB数据库插件

一：介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能，都为IDE开发平台提供封装好的插件，以便项目开发使用。

另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享iOS、Android两个版本，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。这篇文章重点介绍FMDB数据库插件的开发与使用

二：实现思路分析

FMDB数据库插件是需要实现数据的新增、查询、修改、删除等功能，通过querySQLite方法来实现数据的查询，并将接口提供给Javascript开发使用

打开默认浏览器和打开自定义浏览器，具体的实现思路如下：

1. 新建DataBasePlugin类，实现RCTBridgeModule协议

2. 添加RCT_EXPORT_MODULE()宏

3. 添加React Native跟控制器

4. 声明被JavaScript 调用的方法

5. 判断数据库语句，适合使用那个数据库方法

6. 创建数据库DataBase.db

7. 打开数据库

8. 执行sql语句

9. Javascript调用浏览器方法

三：实现源码分析

1. 新建DataBasePlugin类，实现RCTBridgeModule协议

新建继承NSObject的DataBasePlugin类，并实现RCTBridgeModule协议

// DataBasePlugin.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface DataBasePlugin : NSObject<RCTBridgeModule>
@end

2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议，DataBasePlugin的类需要包含RCT_EXPORT_MODULE()宏。
并在这个宏里面添加一个参数“DataBasePlugin”用来指定在 JavaScript 中访问这个模块的名字。
如果你不指定，默认就会使用这个 Objective-C 类的名字。
如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。

// DataBasePlugin.m
#import "DataBasePlugin.h"
@implementation DataBasePlugin
RCT_EXPORT_MODULE(DataBasePlugin);
@end

3. 添加React Native跟控制器

如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下：

// DataBasePlugin.m
#import "DataBasePlugin.h"
#import <React/RCTUtils.h>
@implementation DataBasePlugin
RCT_EXPORT_MODULE(DataBasePlugin);
@end

引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可

UIViewController *vc = RCTPresentedViewController();

4. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现：

// 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(@"数据库常用语句执行方法");
}

RCT_EXPORT_METHOD(querySQLite:(NSDictionary *)arguments
                  withCompletionHandler:(RCTResponseSenderBlock)completion
                  failureHandler:(RCTResponseSenderBlock)failure)
{
    NSLog(@"数据库查询语句执行方法");
}
@end

5. 判断数据库语句，适合使用那个数据库方法

由于数据库查询语句中的查询参数，需要通过接口传入，并不是和sql语句一起传入，所以需要进行拼接，这就需要用到数据库查询方法querySQLite，因为查询语句中包含select字符串，因此作出如下判断：
核心代码如下：

if([arguments[@"sql"] rangeOfString:@"select"].location !=NSNotFound)
    {
        failure(@[@{@"resultCode":@"0",@"resultMessage":@"请使用查询方法querySQLite进行查询"}]);
    }

6. 创建数据库DataBase.db

在导入第三方FMDB库之后，需要在DataBasePlugin.m引入：

#import "FMDatabase.h"

实现数据库的第一步，创建数据表，源码如下：

- (FMDatabase *)db
{
    if (!_db) {
        NSString *path = [[self getDocumentPath] stringByAppendingPathComponent:@"DataBase.db"];
        _db = [FMDatabase databaseWithPath:path];
    }
    return _db;
}

7. 打开数据库

判断数据库表是否已创建，如果创建成功，或者已经存在数据表，即可打开数据库，源码如下：

if (self.db) {
            if ([self.db open]) {
             
            } else {
                failure(@[@{@"resultCode":@"-1",@"resultMessage":@"打开数据库失败"}]);
            }
        }else{
            failure(@[@{@"resultCode":@"-1",@"resultMessage":@"数据库创建失败"}]);
        }

8. 执行sql语句

在创建数据表和打开数据库成功之后，对Javascript传入的sql数据库语句进行处理执行，源码如下：

                BOOL result = [self.db executeUpdate:sqlString];
                if (result) {
                    completion(@[@{@"status":@"1",@"data":@"执行SQL成功"}]);
                } else {
                    failure(@[@{@"resultCode":@"-1",@"resultMessage":@"执行SQL失败"}]);
                }              

9. Javascript调用浏览器方法

现在从 Javascript 里可以这样调用这个方法：

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));
                                         });

源码Demo获取方法

如果需要React Native浏览器插件源码demo，欢迎关注 【网罗开发】微信公众号，回复【64】便可领取。
网罗天下方法，方便你我开发，所有文档会持续更新，欢迎关注一起成长！

希望可以帮助大家，如有问题可加QQ技术交流群: 668562416

如果哪里有什么不对或者不足的地方，还望读者多多提意见或建议

如需转载请联系我，经过授权方可转载，谢谢

---