React Native中使用Sqlite数据库的实例详解-js教程-PHP中文网

React Native中使用Sqlite数据库的实例详解

零下一度

发布： 2017-06-24 14:35:13

原创

3616人浏览过

使用Sqllite可能用不同的环境创建出来的项目，比如说：用Expo创建的就可能和这个不一样！但是具体思路都是一样的，希望这篇文章可以帮助到大家！

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;

[java] view plain copy

@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';

注意每一个打印异常，不然可能看不到哪里出错了

[javascript] view plain copy

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++){

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情
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;
}
};