RN sqlite 数据库 react-native-sqlite-storage 支持事务 支持离线 支持持久

前端之家收集整理的这篇文章主要介绍了RN sqlite 数据库 react-native-sqlite-storage 支持事务 支持离线 支持持久前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.安装
命令行进入到ReactNative项目根目录下执行

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

2.进行全局Gradle设置
编辑 android/settings.gradle文件添加以下内容

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

3.修改android/app/build.gradle文件
dependencies 里面添加

compile project(':react-native-sqlite-storage')

4.编辑MainApplication.java文件,在MainActivitiy.java中注册sqlite模块

import org.pgsqlite.sqlitePluginPackage;

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

5.使用编写sqlite.js文件,引入组件
import sqliteStorage from 'react-native-sqlite-storage';

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

import React,{Component} from 'react';  
import{  
  ToastAndroid,} from 'react-native';  
import sqliteStorage from 'react-native-sqlite-storage';  
sqliteStorage.DEBUG(true);  
var database_name = "test.db";//数据库文件  
var database_version = "1.0";//版本号  
var database_displayname = "MysqLite";  
var database_size = -1;//-1应该是表示无限制  
var db;  
export default class  sqlite extends Component{  
    componentWillUnmount(){  
    if(db){  
        this._successCB('close');  
        db.close();  
    }else {  
        console.log("sqliteStorage not 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();  
    }  
    //创建用户表  
    db.transaction((tx)=> {  
      tx.executesql('CREATE TABLE IF NOT EXISTS USER(' +  
          'id INTEGER PRIMARY KEY  AUTOINCREMENT,' +  
          'name varchar,'+  
          'age VARCHAR,' +  
          'sex VARCHAR,' +  
          'phone VARCHAR,' +  
          'email VARCHAR,' +  
          'qq VARCHAR)',[],()=> {  
              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 user',()=>{  
  
      });  
    });  
  }  
  dropTable(){  
    db.transaction((tx)=>{  
      tx.executesql('drop table user',()=>{  
  
      });  
    },(err)=>{  
      this._errorCB('transaction',()=>{  
      this._successCB('transaction');  
    });  
  }  
    insertUserData(userData){  
    let len = userData.length;  
    if (!db) {  
        this.open();  
    }  
    this.createTable();  
    this.deleteData();  
    db.transaction((tx)=>{  
       for(let i=0; i<len; i++){  
        var user = userData[i];  
        let name= user.name;  
        let age = user.age;  
        let sex = user.sex;  
        let phone = user.phone;  
        let email = user.email;  
        let qq = user.qq;  
        let sql = "INSERT INTO user(name,age,sex,phone,email,qq)"+  
        "values(?,?,?)";  
        tx.executesql(sql,[name,qq],()=>{  
            
          },(err)=>{  
            console.log(err);  
          }  
        );  
      }  
    },(error)=>{  
      this._errorCB('transaction',error);  
      ToastAndroid.show("数据插入失败",ToastAndroid.SHORT);  
    },()=>{  
      this._successCB('transaction insert data');  
      ToastAndroid.show("成功插入 "+len+" 条用户数据",ToastAndroid.SHORT);  
    });  
  }  
  close(){  
      if(db){  
          this._successCB('close');  
          db.close();  
      }else {  
          console.log("sqliteStorage not open");  
      }  
      db = null;  
  }  
  _successCB(name){  
    console.log("sqliteStorage "+name+" success");  
  }  
  _errorCB(name,err){  
    console.log("sqliteStorage "+name);  
    console.log(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();  
    }  
    //建表  
    sqlite.createTable();  
    //删除数据  
    sqlite.deleteData();  
    //模拟一条数据  
    var userData = [];  
    var user = {};  
    user.name = "张三";  
    user.age = "28";  
    user.sex = "男";  
    user.phone = "18900001111";  
    user.email = "2343242@qq.com";  
    user.qq = "111222";  
    userData.push(user);  
    //插入数据  
    sqlite.insertUserData(userData);  
    //查询  
    db.transaction((tx)=>{  
      tx.executesql("select * from user",(tx,results)=>{  
        var len = results.rows.length;  
        for(let i=0; i<len; i++){  
          var u = results.rows.item(i);  
          //一般在数据查出来之后,  可能要 setState操作,重新渲染页面  
          alert("姓名:"+u.name+",年龄:"+u.age+",电话:"+u.phone);  
        }  
      });  
    },(error)=>{//打印异常信息  
      console.log(error);  
    });  
  }  
    render(){  
        return null;  
    }  
}
原文链接:https://www.f2er.com/sqlite/198026.html

猜你在找的Sqlite相关文章