React Native 中如何使用Sqlite数据库

Posted 2020-09-23

使用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 = "[email protected]";  
•     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;  
•     }  
• }