React-Native 集成SQLite数据库

最新推荐文章于 2024-05-20 09:47:23 发布

晒干的老咸鱼

最新推荐文章于 2024-05-20 09:47:23 发布

阅读量2.4k

点赞数

分类专栏： React-native

本文链接：https://blog.csdn.net/chali1314/article/details/114066210

版权

React-native 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

由于项目需要存储多条记录消息，所以这里记录如何使用React-Native操作SQLite数据库

我使用的是react-native-sqlite-storage

Android端的配置为：

npm install react-native-sqlite-storage --save

安装完成后进行链接

react-native link react-native-sqlite-storage

然后进入android子目录，在setting.gradle文件的include ':app'上面一行添加：

include ':react-native-sqlite-storage'
project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')

再在app/build.gradle文件的dependencies中添加：

dependencies {
    ...
    compile project(':react-native-sqlite-storage')
}

最后在app/src/java/com/[项目名]/MainApplication.java文件中添加修改成如下内容：

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new SQLitePluginPackage()
      );
    }

至此Android端的配置也完成了。

IOS端的配置为：

首先在RN的根目录下安装sqlite的包：

npm install --save react-native-sqlite-storage

然后进行link

rnpm link

rnpm 即 React Native Package Manager，是react native的专门的包管理工具。

如果还没有安装过rnpm或者link报错，可以尝试一下命令：

npm -g install rnpm xcode

通常情况经过上述两步即可完成依赖的配置工作。当然官方还提供了使用pod以及手动link的教程，由于比较繁琐这里不赘述了，留个传送门

使用方式为：

在index.js中添加

import SQLite from 'react-native-sqlite-storage';
SQLite.DEBUG(true);
SQLite.enablePromise(true);

这样添加的好处是可以将SQLite作为一个全局对象去使用。包括数据库的打开、连接等操作均可以这么处理。

SQLite.openDatabase({name: 'my.db', location: 'default'}, successcb, errorcb);

在Android下，由于数据库文件位于固定位置，所以location参数是无效的。

在IOS下，location有以下3个可选参数：分别为

default：数据文件会放置在Library/LocalDatabase子目录下，对iTunes不可见，也不会被iCloud备份
Library：数据文件会放置在Library子目录下，对iTunes不可见，但是会iCloud备份
Documents：数据文件会放置在Library子目录下，对iTunes可见，同时会iCloud备份

也可以不在index.js中添加SQLite代码，而是单独定义一个sqlite.js文件，把数据库操作定义好，在其他需要进行数据库操作的地方引入sqlite.js，然后调用插入或者查询即可

示例如下：

编写sqlite.js文件,引入组件 import SQLiteStorage from 'react-native-sqlite-storage';

注意每一个transaction后面(err)=>{ console.log(err) }打印异常，不然可能看不到哪里出错了

import React,{Component} from 'react';

import SQLiteStorage from 'react-native-sqlite-storage';

SQLiteStorage.DEBUG(true);

var database_name = "notify.db";//数据库文件

var database_version = "1.0";//版本号

var database_displayname = "notifyDB";

var database_size = -1;//-1应该是表示无限制

var db;

export default class SQLiteHelper extends Component{

constructor(props){

super(props)

this.init()

}

//在组建被加载的时候进行初始化操作

componentDidMount(){

if (!db) {

this.open();

}

//在组件被销毁的时候关闭数据库连接

componentWillUnmount(){

if(db){

this._successCB('close');

db.close();

}else {

console.log("SQLiteStorage not open");

}

init(){

if (!db) {

this.open();

}

//打开数据库连接

open(){

db = SQLiteStorage.openDatabase(

database_name,

database_version,

database_displayname,

database_size,

()=>{

this._successCB('open');

(err)=>{

this._errorCB('open',err);

}

);

return db;

}

//创建表

createTable(){

if (!db) {

this.open();

}

//创建通知消息表

/**本地存储的通知消息表字段如下：

* notify_type 通知类型，0：系统通知；1：系统公告；2：平台活动

* notify_message_id 唯一标识一条通知消息的id

* notify_time 接收到通知的时间(yyyy-MM-dd HH:mm:ss)

* notify_title 通知消息的标题

* notify_content 通知消息的内容

* notify_state 通知消息的状态，0：未读；1：已读

db.transaction((tx)=> {

tx.executeSql('CREATE TABLE IF NOT EXISTS NOTIFY(' +

'id INTEGER PRIMARY KEY AUTOINCREMENT,' +

'notify_user_id VARCHAR,'+

'notify_type INTEGER,'+

'notify_message_id VARCHAR,' +

'notify_time VARCHAR,' +

'notify_title VARCHAR,' +

'notify_content VARCHAR,' +

'notify_state INTEGER)'

, [], ()=> {

this._successCB('executeSql');

}, (err)=> {

this._errorCB('executeSql', err);

});

}, (err)=> {//所有的 transaction都应该有错误的回调方法，在方法里面打印异常信息，不然你可能不会知道哪里出错了。

this._errorCB('transaction', err);

}, ()=> {

this._successCB('transaction');

})

}

//删除整张表数据

deleteData(){

if (!db) {

this.open();

}

db.transaction((tx)=>{

tx.executeSql('delete from notify',[],()=>{

});

}

//删除表

dropTable(){

db.transaction((tx)=>{

tx.executeSql('drop table notify',[],()=>{

});

},(err)=>{

this._errorCB('transaction', err);

},()=>{

this._successCB('transaction');

});

}

//向表中插入数据

insertNotifyData(notifyData){

let len = notifyData.length;

if (!db) {

this.open();

}

this.createTable();

/**本地存储的通知消息表字段如下：

* notify_user_id 通知的用户id，用来唯一标识某一个用户

* notify_type 通知类型，0：系统通知；1：系统公告；2：平台活动

* notify_message_id 唯一标识一条通知消息的id

* notify_time 接收到通知的时间(yyyy-MM-dd HH:mm:ss)

* notify_title 通知消息的标题

* notify_content 通知消息的内容

* notify_state 通知消息的状态，0：未读；1：已读

db.transaction((tx)=>{

for(let i=0; i<len; i++){

let notify = notifyData[i];

let notifyUserId = notify.notifyUserId;

let notifyType = notify.notifyType;

let notifyMessageId = notify.notifyMessageId;

let notifyTime = notify.notifyTime;

let notifyTitle = notify.notifyTitle;

let notifyContent = notify.notifyContent;

let notifyState = notify.notifyState;

let sql = "INSERT INTO NOTIFY(notify_user_id, notify_type, notify_message_id, notify_time, notify_title, notify_content, notify_state)"+

"values(?,?,?,?,?,?,?)";

tx.executeSql(sql, [notifyUserId, notifyType, notifyMessageId, notifyTime, notifyTitle, notifyContent, notifyState],

()=>{

console.log('insertNotifyData success');

},(err)=>{

console.log('insertNotifyData error: ' + err);

}

);

}

},(error)=>{

this._errorCB('transaction', error);

//ToastAndroid.show("数据插入失败",ToastAndroid.SHORT);

},()=>{

this._successCB('transaction insert data');

//ToastAndroid.show("成功插入 "+len+" 条用户数据",ToastAndroid.SHORT);

});

}

//查询表中数据

queryNotifyData(params, callback){

if (!db) {

this.open();

}

//查询

db.transaction((tx)=>{

tx.executeSql("select * from notify where notify_user_id =? order by notify_time desc", [params.userId], (tx,results)=>{

var len = results.rows.length;

let result=[]

//遍历处理返回数组的格式，方便界面上渲染处理

for(let i=0; i<len; i++){

result.push(results.rows.item(i))

}

console.log('queryNotifyData success: ' + JSON.stringify(result));

callback&&callback(true, result)

});

},(error)=>{

console.log('queryNotifyData error: ' + JSON.stringify(error));

callback&&callback(false, error)

});

}

//将所有消息的状态更新为已读

updateNotifyData(params, callback){

if (!db) {

this.open();

}

db.transaction((tx)=>{

tx.executeSql("update notify set notify_state=1 where notify_user_id=?", [params.userId],

(tx, result)=>{

console.log('updateNotifyData' + result);

callback&&callback(true, result)

(error)=>{

console.log('updateNotifyData error: ' + error);

callback&&callback(false, result)

}

);

})

}

//关闭数据库连接

close(){

if(db){

this._successCB('close');

db.close();

}else {

console.log("SQLiteStorage not open");

}

db = null;

}

_successCB(name){

console.log("_successCB SQLiteStorage "+name+" success");

}

_errorCB(name, err){

console.log("SQLiteStorage " + name);

console.log('_errorCB error: ' + err);

}

render(){

return null;

}

};

在其他类中调用，使用时先引入sqlite.js

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
Navigator,
StyleSheet,
} from 'react-native';
import SQLite from './sqlite';
var sqLite = new SQLite();
var db;
class App extends Component{
   compennetDidUnmount(){
sqLite.close();
}
componentWillMount(){
   //开启数据库
   if(!db){
db = sqLite.open();
}

//插入数据

let notify = {}

let { login } = store.getState();

notify.notifyUserId = login.userNo;

//系统通知，后台的CommonConst.NOTIFY_TYPE定义的常量

if(result.extras.notifyType === '0'){

notify.notifyType = '系统通知';

}else if(result.extras.notifyType === '1'){

//平台公告

notify.notifyType = '平台公告';

}else if(result.extras.notifyType === '2'){

//平台活动

notify.notifyType = '平台活动';

}

notify.notifyMessageId = result.messageID;

notify.notifyTime = moment().format('MM-DD HH:mm');

notify.notifyTitle = result.title;

notify.notifyContent = result.content;

notify.notifyState = 0; //接收到后台的消息默认都是未读

let sqlite = new SQLiteHelper();

sqlite.insertNotifyData([notify]);

//查询和更新数据

let { login } = store.getState();

let queryParams = {userId:''};

queryParams.userId = login.userNo;

sqlite.queryNotifyData(queryParams, (resultType, result) =>{

if(resultType){

console.log('queryNotifyData success result ' + JSON.stringify(result));

//本次查询之后需要再把所有的state状态修改为已读

sqlite.updateNotifyData(queryParams, (resultType, result) =>{

if(resultType){

console.log('updateNotifyData success userId: ' + queryParams.userId);

}

})

}else{

console.log('queryNotifyData error result ' + JSON.stringify(result));

}

})

   render(){
       return null;
   }
}

晒干的老咸鱼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
React-Native 集成SQLite数据库

本文参考自：https://www.jianshu.com/p/4f6fe34d9b87由于项目需要存储多条记录消息，所以这里记录如何使用React-Native操作SQLite数据库我使用的是react-native-sqlite-storageAndroid端的配置为：npm install react-native-sqlite-storage --save然后进入android子目录，在setting.gradle文件的include ':app'上面一行添加：in.
复制链接

扫一扫