首页 > 代码库 > React Native 中如何使用Sqlite数据库

React Native 中如何使用Sqlite数据库

2024-10-06 17:01:39   214人阅读

使用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
  1. @Override  
  2.     protected List<ReactPackage> getPackages() {  
  3.       return Arrays.<ReactPackage>asList(  
  4.           new MainReactPackage(),  
  5.           new SQLitePluginPackage(),  
  6.           new BaiduMapPackage(getApplicationContext())  
  7.       );  
  8.     }  

截图如下： 技术分享

5.使用

编写sqlite.js文件,引入组件     import SQLiteStorage from ‘react-native-sqlite-storage‘;

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

[javascript] view plain copy
  1. import React,{Component} from ‘react‘;  
  2. import{  
  3.   ToastAndroid,  
  4. } from ‘react-native‘;  
  5. import SQLiteStorage from ‘react-native-sqlite-storage‘;  
  6. SQLiteStorage.DEBUG(true);  
  7. var database_name = "test.db";//数据库文件  
  8. var database_version = "1.0";//版本号  
  9. var database_displayname = "MySQLite";  
  10. var database_size = -1;//-1应该是表示无限制  
  11. var db;  
  12. export default class  SQLite extends Component{  
  13.     componentWillUnmount(){  
  14.     if(db){  
  15.         this._successCB(‘close‘);  
  16.         db.close();  
  17.     }else {  
  18.         console.log("SQLiteStorage not open");  
  19.     }  
  20.   }  
  21.   open(){  
  22.     db = SQLiteStorage.openDatabase(  
  23.       database_name,  
  24.       database_version,  
  25.       database_displayname,  
  26.       database_size,  
  27.       ()=>{  
  28.           this._successCB(‘open‘);  
  29.       },  
  30.       (err)=>{  
  31.           this._errorCB(‘open‘,err);  
  32.       });  
  33.     return db;  
  34.   }  
  35.   createTable(){  
  36.     if (!db) {  
  37.         this.open();  
  38.     }  
  39.     //创建用户表  
  40.     db.transaction((tx)=> {  
  41.       tx.executeSql(‘CREATE TABLE IF NOT EXISTS USER(‘ +  
  42.           ‘id INTEGER PRIMARY KEY  AUTOINCREMENT,‘ +  
  43.           ‘name varchar,‘+  
  44.           ‘age VARCHAR,‘ +  
  45.           ‘sex VARCHAR,‘ +  
  46.           ‘phone VARCHAR,‘ +  
  47.           ‘email VARCHAR,‘ +  
  48.           ‘qq VARCHAR)‘  
  49.           , [], ()=> {  
  50.               this._successCB(‘executeSql‘);  
  51.           }, (err)=> {  
  52.               this._errorCB(‘executeSql‘, err);  
  53.         });  
  54.     }, (err)=> {//所有的 transaction都应该有错误的回调方法，在方法里面打印异常信息，不然你可能不会知道哪里出错了。  
  55.         this._errorCB(‘transaction‘, err);  
  56.     }, ()=> {  
  57.         this._successCB(‘transaction‘);  
  58.     })  
  59.     }  
  60.   deleteData(){  
  61.     if (!db) {  
  62.         this.open();  
  63.     }  
  64.     db.transaction((tx)=>{  
  65.       tx.executeSql(‘delete from user‘,[],()=>{  
  66.   
  67.       });  
  68.     });  
  69.   }  
  70.   dropTable(){  
  71.     db.transaction((tx)=>{  
  72.       tx.executeSql(‘drop table user‘,[],()=>{  
  73.   
  74.       });  
  75.     },(err)=>{  
  76.       this._errorCB(‘transaction‘, err);  
  77.     },()=>{  
  78.       this._successCB(‘transaction‘);  
  79.     });  
  80.   }  
  81.     insertUserData(userData){  
  82.     let len = userData.length;  
  83.     if (!db) {  
  84.         this.open();  
  85.     }  
  86.     this.createTable();  
  87.     this.deleteData();  
  88.     db.transaction((tx)=>{  
  89.        for(let i=0; i<len; i++){  
  90.         var user = userData[i];  
  91.         let name= user.name;  
  92.         let age = user.age;  
  93.         let sex = user.sex;  
  94.         let phone = user.phone;  
  95.         let email = user.email;  
  96.         let qq = user.qq;  
  97.         let sql = "INSERT INTO user(name,age,sex,phone,email,qq)"+  
  98.         "values(?,?,?,?,?,?)";  
  99.         tx.executeSql(sql,[name,age,sex,phone,email,qq],()=>{  
  100.             
  101.           },(err)=>{  
  102.             console.log(err);  
  103.           }  
  104.         );  
  105.       }  
  106.     },(error)=>{  
  107.       this._errorCB(‘transaction‘, error);  
  108.       ToastAndroid.show("数据插入失败",ToastAndroid.SHORT);  
  109.     },()=>{  
  110.       this._successCB(‘transaction insert data‘);  
  111.       ToastAndroid.show("成功插入 "+len+" 条用户数据",ToastAndroid.SHORT);  
  112.     });  
  113.   }  
  114.   close(){  
  115.       if(db){  
  116.           this._successCB(‘close‘);  
  117.           db.close();  
  118.       }else {  
  119.           console.log("SQLiteStorage not open");  
  120.       }  
  121.       db = null;  
  122.   }  
  123.   _successCB(name){  
  124.     console.log("SQLiteStorage "+name+" success");  
  125.   }  
  126.   _errorCB(name, err){  
  127.     console.log("SQLiteStorage "+name);  
  128.     console.log(err);  
  129.   }  
  130.     render(){  
  131.         return null;  
  132.     }  
  133. };  

‘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;  
  •     }  
  • } 

 

React Native 中如何使用Sqlite数据库


联系
我们