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,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.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,
            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 = "[email protected]";
        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>
        );
    }
}

本文鏈接：https://blog.csdn.net/teagreen_red/article/details/78543900

智能推薦

react native

一、移動APP 開發技術選型進化第一階段 Native 1.性能優秀 2.開發效率低下，不可跨端第二階段 Native H5/Hybrid 1.Hybrid多端運行，解決了開發效率問題 2.性能存在瓶頸現階段 Native H5/Hybrid React Native 二、開發進階-頁面性能頁面(Page)切換卡頓問題頁面切換...

中文網站：https://reactnative.cn/docs/getting-started 安裝環境在Mac平臺上開發React Native需要安裝以下環境和工具： Note.js React Native Command Line Tools XCode/AndroidStudio 1、安裝Node.js React Native開發需要用到Node.js環境。我們做React Nat...

React-Native學習筆記——react-redux最佳實踐基礎篇

實踐之前首先需要了解一些基本概念。 react-component：props、state redux：Store、state、action、reducer React Component props this.props contains the props that were defined by the caller of this component. In part...

React Native學習記錄

一、新建項目 1、安裝react環境 2、初始化項目 3、連接安卓機： 4、啟動項目二、獲取地理位置 1、添加權限 iOS 你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段來啟用定位功能。如果你使用react-native init創建項目，定位會被默認啟用。 Android 要請求訪問地理位置的權限，你需要在AndroidManife...

react學習：React狀態

實現一個點贊按鈕。點擊數字增加一：建立LikeButton.js 二：在App.js 中引入；三、查看效果：...