React Native 中如何使用Sqlite数据库

使用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. dropTable(){
70. db.transaction((tx)=>{
71. tx.executeSql(‘drop table user‘,[],()=>{
72. });
73. },(err)=>{
74. this._errorCB(‘transaction‘, err);
75. },()=>{
76. this._successCB(‘transaction‘);
77. });
78. }
79. insertUserData(userData){
80. let len = userData.length;
81. if (!db) {
82. this.open();
83. }
84. this.createTable();
85. this.deleteData();
86. db.transaction((tx)=>{
87. for(let i=0; i<len; i++){
88. var user = userData[i];
89. let name= user.name;
90. let age = user.age;
91. let sex = user.sex;
92. let phone = user.phone;
93. let email = user.email;
94. let qq = user.qq;
95. let sql = "INSERT INTO user(name,age,sex,phone,email,qq)"+
96. "values(?,?,?,?,?,?)";
97. tx.executeSql(sql,[name,age,sex,phone,email,qq],()=>{
98. },(err)=>{
99. console.log(err);
100. }
101. );
102. }
103. },(error)=>{
104. this._errorCB(‘transaction‘, error);
105. ToastAndroid.show("数据插入失败",ToastAndroid.SHORT);
106. },()=>{
107. this._successCB(‘transaction insert data‘);
108. ToastAndroid.show("成功插入 "+len+" 条用户数据",ToastAndroid.SHORT);
109. });
110. }
111. close(){
112. if(db){
113. this._successCB(‘close‘);
114. db.close();
115. }else {
116. console.log("SQLiteStorage not open");
117. }
118. db = null;
119. }
120. _successCB(name){
121. console.log("SQLiteStorage "+name+" success");
122. }
123. _errorCB(name, err){
124. console.log("SQLiteStorage "+name);
125. console.log(err);
126. }
127. render(){
128. return null;
129. }
130. };

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