react native学习笔记17——存储篇（2）SQLite
发布时间：2020-12-15 06:41:06 所属栏目：百科 来源：网络整理
导读：前言 对于存放数据量小且简易的数据我们可以通过AsyncStorage来存储，但对于数据结构复杂、数据量大的数据，我们可以使用移动开发中常用的SQLite来处理。 SQLite是一种轻型的数据库，多用于移动端开发，在原生应用开发中比较常见。 使用 React Native并没有
前言对于存放数据量小且简易的数据我们可以通过AsyncStorage来存储，但对于数据结构复杂、数据量大的数据，我们可以使用移动开发中常用的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;
}
}
创建数据表
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;
}
}
调用工具类 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> ); } }
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |