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 getPackages() {  

3.       return Arrays.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

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 = "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

• var u = results.rows.item(i);

• //一般在数据查出来之后， 可能要 setState操作，重新渲染页面

• alert("姓名："+u.name+"，年龄："+u.age+"，电话："+u.phone);

• }

• });

• },(error)=>{//打印异常信息  

•       console.log(error);  

•     });  

•   }  

•     render(){  

•         return null;  

•     }  

• } 

 

Atas ialah kandungan terperinci React Native中使用Sqlite数据库的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!