React Native中使用Sqlite数据库的实例详解-tutorial js-php.cn

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

零下一度

Lepaskan： 2017-06-24 14:35:13

asal

3345 orang telah melayarinya

使用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 getPackages() {
return Arrays.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
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;
}
};

'react';

import {
AppRegistry,
Text,
View,
Navigator,
StyleSheet,
} from 'react-native';
import SQLite from './sqlite';
var sqLite = new SQLite();
var db;
class App extends Component{
compennetDidUnmount(){
sqLite.close();
}
componentWillMount(){
//开启数据库
if(!db){
db = sqLite.open();
}
//建表
sqLite.createTable();
//删除数据
sqLite.deleteData();
//模拟一条数据
var userData = [];
var user = {};
user.name = "张三";
user.age = "28";
user.sex = "男";
user.phone = "18900001111";
user.email = "2343242@qq.com";
user.qq = "111222";
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
var u = results.rows.item(i);
//一般在数据查出来之后，可能要 setState操作，重新渲染页面
alert("姓名："+u.name+"，年龄："+u.age+"，电话："+u.phone);
}
});
},(error)=>{//打印异常信息
console.log(error);
});
}
render(){
return null;
}
}

Atas ialah kandungan terperinci React Native中使用Sqlite数据库的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!