《ReactNative》之sqlite(react-native-sqlite-storage)

react-native-sqlite-storage 版本  3.3.3

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', err);
    },()=>{
      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,age,sex,phone,email,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;
	}
}