strong 根目錄 nod tro pla ucc lose exist splay

使用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‘,[],()=>{
67. });
68. });
69. }
70. dropTable(){
71. db.transaction((tx)=>{
72. tx.executeSql(‘drop table user‘,[],()=>{
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],()=>{
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;
• }
• }

React Native 中如何使用Sqlite數據庫