react native学习笔记17——存储篇2SQLite

React 2020-06-19

前言

对于存放数据量小且简易的数据我们可以通过AsyncStorage来存储，但对于数据结构复杂、数据量大的数据，我们可以使用移动开发中常用的sqlite来处理。
sqlite是一种轻型的数据库，多用于移动端开发，在原生应用开发中比较常见。

使用

React Native并没有提供使用sqlite的组件，我们可以通过使用第三方组件react-native-sqlite来使用原生的sqliteDatabase。

Android版配置

1. 安装

在项目根目录下执行cmd命令：

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

2. 修改settings.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. 修改build.gradle配置

修改android/app/build.gradle的配置

...

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

4. 在MainApplication.java注册模块

修改android/app/src/main/java/com/[YourAppName]/MainApplication.java的配置

import org.pgsqlite.sqlitePluginPackage;

public class MainApplication extends Application implements ReactApplication {
  ......

  /** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones,add more packages here. */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new sqlitePluginPackage(),// register sqlite Plugin here
        new MainReactPackage());
    }
}

iOS版配置

1. 安装

在项目根目录下执行cmd命令：

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

2. XCode sqlite项目依赖安装

将sqlite项目作为一个库进行依赖到当前项目，如下：

3.XCode sqlite库依赖

将libsqlite.a添加到Libraries and Frameworks中，同时添加sqlite3.0.tbd (XCode 7) 或者libsqlite3.0.dylib (XCode 6 and earlier)到当前位置：

使用实例

新建一个数据库的工具组件sqlite.js，该模块类似于工具类，用于数据库的建表、增删改查等操作，不需要渲染任何界面，所以render return null。

import React from 'react';
import sqliteStorage from 'react-native-sqlite-storage';

sqliteStorage.DEBUG(true);
sqliteStorage.DEBUG(true);
var database_name = "test.db";//数据库文件
var database_version = "1.0";//版本号
var database_displayname = "MysqLite";
var database_size = -1;
var db;
export default class sqlite extends Component {
  render(){
        return null;
    }
}

创建数据表
这里创建了一个用户信息表，表结构如下：

字段 类型 描述
id INTEGER 主键
name VARCHAR 姓名
age VARCHAR 年龄
sex VARCHAR 性别
phone VARCHAR 电话号码
email VARCHAR 邮箱
address VARCHAR 地址 
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,' + 'address VARCHAR)',[],()=> { this._successCB('executesql'); },(err)=> { this._errorCB('executesql',err); }); },(err)=> {//所有的 transaction都应该有错误的回调方法，在方法里面打印异常信息，不然你可能不会知道哪里出错了。 this._errorCB('transaction',err); },()=> { this._successCB('transaction'); }) }

定义打开数据open和关闭数据库close的方法

open(){
        db = sqliteStorage.openDatabase(
            database_name,database_version,database_displayname,database_size,()=>{
                this._successCB('open');
            },(err)=>{
                this._errorCB('open',err);
            });
        return db;
    }
    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);
    }

插入数据

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 address = user.address;
                let sql = "INSERT INTO user(name,age,sex,phone,email,address)"+
                    "values(?,?,?)";
                tx.executesql(sql,[name,address],()=>{

                    },(err)=>{
                        console.log(err);
                    }
                );
            }
        },(error)=>{
            this._errorCB('transaction',error);
        },()=>{
            this._successCB('transaction insert data');
        });
    }

删除数据

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

sqlite.js的完整代码如下：

//sqlite.js
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;
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,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,' +
                'address VARCHAR)',()=> {
                    this._successCB('executesql');
                },(err)=> {
                    this._errorCB('executesql',err);
                });
        },(err)=> {//所有的 transaction都应该有错误的回调方法，在方法里面打印异常信息，不然你可能不会知道哪里出错了。
            this._errorCB('transaction',()=> {
            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',()=>{
            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 address = user.address;
                let sql = "INSERT INTO user(name,()=>{
            this._successCB('transaction insert data');
        });
    }
    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;
    }
}

调用工具类
在同一目录下新建sqliteDemo.js调用sqlite.js中封装好的方法，注意使用时先引入sqlite.js

import React,{ Component } from 'react';
import {
    AppRegistry,Text,View,} from 'react-native';
import sqlite from './sqlite';
var sqlite = new sqlite();
var db;
export default class sqliteDemo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            name:"",age:"",phone:"",email:"",address:"",};
    }

    compennetDidUnmount(){
        //关闭数据库
        sqlite.close();
    }
    componentwillMount(){
        //开启数据库
        if(!db){
            db = sqlite.open();
        }
        //建表
        sqlite.createTable();
        //删除数据
        sqlite.deleteData();

        //模拟数据
        var userData = [];
        var user = {};
        user.name = "Mr.Onion";
        user.age = "26";
        user.sex = "男";
        user.phone = "12345678910";
        user.email = "123454321@qq.com";
        user.address = "A市B街111号C室";
        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);
                    this.setState({
                        name:u.name,age:u.age,phone:u.phone,email:u.email,address:u.address,});
                }
            });
        },(error)=>{
            console.log(error);
        });
    }
    render(){
        return (
            <View> <Text> 姓名:{this.state.name} </Text> <Text> 年龄：{this.state.age} </Text> <Text> 电话：{this.state.phone} </Text> <Text> Email：{this.state.email} </Text> <Text> 地址：{this.state.address} </Text> </View> ); } }

相关文章

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接...
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc ...