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

React 前端之家
前端之家收集整理的这篇文章主要介绍了react native学习笔记17——存储篇（2）SQLite，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

对于存放数据量小且简易的数据我们可以通过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> ); } }
@H_502_693@ 原文链接：https://www.f2er.com/react/302333.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作