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

来源：互联网发布：阿里云备案转入编辑：程序博客网时间：2024/06/05 16:12

前言

对于存放数据量小且简易的数据我们可以通过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,age,sex,phone,email,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.jsimport 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,            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,' +                'address 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 address = user.address;                let sql = "INSERT INTO user(name,age,sex,phone,email,address)"+                    "values(?,?,?,?,?,?)";                tx.executeSql(sql,[name,age,sex,phone,email,address],()=>{                    },(err)=>{                        console.log(err);                    }                );            }        },(error)=>{            this._errorCB('transaction', error);        },()=>{            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>        );    }}

阅读全文

0 0