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;
@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';
注意每一个transaction后面(err)=>{ console.log(err) }打印异常,不然可能看不到哪里出错了
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',()=>{ 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 qq = user.qq; let sql = "INSERT INTO user(name,age,sex,phone,email,qq)"+ "values(?,?,?)"; tx.executesql(sql,[name,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; } };
import React,{ Component } from '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<len; i++){ var u = results.rows.item(i); //一般在数据查出来之后, 可能要 setState操作,重新渲染页面 alert("姓名:"+u.name+",年龄:"+u.age+",电话:"+u.phone); } }); },(error)=>{//打印异常信息 console.log(error); }); } render(){ return null; } }原文链接:https://www.f2er.com/sqlite/198026.html