Detailed explanation of examples of using Sqlite database in React Native

Projects created using Sqllite may be created in different environments. For example, projects created using Expo may be different from this one! But the specific ideas are the same. I hope this article can help everyone!

---

##1. Installation

The command line enters the root directory of the ReactNative project and executes

##npm install React-native-sqlite-storage --save

2. Make global Gradle settingsEdit the android/settings.gradle file and add the following content

include ':react-native-sqlite-storage'

project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../ node_modules/react-native-sqlite-storage/src/android')

3. Modify the android/app/build.gradle file

Add compile project(':react-native-sqlite-storage')

4. Edit the MainApplication.Java file, Register the sqlite module in MainActivitiy.java

##import org.pgsqlite.SQLitePluginPackage;

[java]

view plain copy

@ Override

1. ##protected List getPackages() {

2. ##return Arrays.< ;ReactPackage>asList(

3. ##                                                                           ,

##                                                                                                                                                                                                                                                                                        since
4. ## }

5. Screenshot below:

7. 5. Use

8. # to write the sqlite.js file and introduce the component import SQLiteStorage from 'react-native- sqlite-storage';

Pay attention to each printing exception, otherwise you may not see what went wrong
[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';

##SQLiteStorage.DEBUG(
6. true);

##var database_name =
7. "test.db";

   //Database file

var database_version =
8. "1.0";

   //Version number

var database_displayname =
9. "MySQLite";
   ##var database_size = -1;
//-1 It should mean unlimited

10. ##var db;

11. export

    default
class SQLite
12. extends Component{

    ## componentWillUnmount(){

13. if(db){

14. this._successCB('close');

15. db.close();

    ## }
else {
## console. log(
17. "SQLiteStorage not open");
    ## }

18. }

19. open(){

20. db = SQLiteStorage.openDatabase(

21. database_name,

22. database_version,

## database_displayname,

23. ## database_size,

24. ()=>{

25.                                                                                                                                           
26. ##                         (err)=>

27. });

28. return db; ## }

29. createTable(){

30. if (!db) {

31.       this.open();

32. ##                                                                                                    

## db.transaction((tx)=> {

33. tx.executeSql(

    'CREATE TABLE IF NOT EXISTS USER(' +

34. ##                                                                                                    '+

35. ##                                                                                                              

37.                                                                                                                                                                   #                                                                                                                                                                                                                    , , ,                                 ##            

    this._successCB(
'executeSql');    

38. ##                                                                                                                      
39.                   

    this._errorCB('executeSql', err);

    }, (err)=> {
//All transactions should have error callback methods and print exception information in the method, otherwise you may not know what went wrong.
##         
41. this._errorCB(

    'transaction', err);

}, ()=> {
43. this._successCB(

    'transaction');

})

44. ## }

45. deleteData(){

46. if (!db) {

    ##this.open();

47. ## }

48. db.transaction((tx)=>{

    tx.executeSql(
'delete from user',[],()=> ;{
# });
});

52. }

53. dropTable(){

    ## db.transaction((tx)=>{

54. tx.executeSql(
'drop table user',[],()=>{

56. });

57. },(err)=>{
this ._errorCB(
59. 'transaction', err);

60. ## },()=>{

61.     

    this._successCB(
'transaction'); 
63. ##                                                      
    insertUserData(userData){

64. let len ​​= userData.length;
if (!db) {
67. ##this.open();

    ## }

68.    

    this.createTable();  

69.       this.deleteData();    

70. db.transaction((tx)=>{

71.                                                                                                                                                                                                                                                                   
    # Let age = user.age;

72. ## let sex = user.sex;

73.         let phone = user.phone;  

74.         let email = user.email;  

75.         let qq = user.qq;  

76.         let sql = "INSERT INTO user(name,age,sex,phone,email,qq)"+  

77.         "values(?,?,?,?,?,?)";  

78.         tx.executeSql(sql,[name,age,sex,phone,email,qq],()=>{  

80.           },(err)=>{  

81.             console.log(err);  

82.           }  

83.         );  

84.       }  

85.     },(error)=>{  

86.       this._errorCB('transaction', error);  

87.       ToastAndroid.show("数据插入失败",ToastAndroid.SHORT);  

88.     },()=>{  

89.       this._successCB('transaction insert data');  

90.       ToastAndroid.show("成功插入 "+len+" 条用户数据",ToastAndroid.SHORT);  

91.     });  

92.   }  

93.   close(){  

94.       if(db){  

95.           this._successCB('close');  

96.           db.close();  

97.       }else {  

98.           console.log("SQLiteStorage not open");  

99.       }  

100.       db = null;  

101.   }  

102.   _successCB(name){  

103.     console.log("SQLiteStorage "+name+" success");  

104.   }  

105.   _errorCB(name, err){  

106.     console.log("SQLiteStorage "+name);  

107.     console.log(err);  

108.   }  

109.     render(){  

110.         return null;  

111.     }  

112. };  

'react';

• ##import {

• AppRegistry,

• Text,

• View,

• Navigator,

• StyleSheet,

##} from
• 'react-native';

• import SQLite from

  './sqlite';

• var sqLite =

  new SQLite();

##var db;
class App
• extends Component{

  ## compennenetDidUnmount(){

• sqLite.close( );

• }

• componentWillMount(){

• //Open the database

• ##     if(!db){  

•       db = sqLite.open();  

• }  

•  

  //Create table  

•   sqLite.createTable();

• //Delete data

• ## sqLite.deleteData();

• //Simulating a piece of data

• var userData = [];

• ##var user = {};

• user.name =

  "张三";

## user.age =
• "28";

user.sex =
• "Male";
  ## user.phone =
"18900001111";

• user.email =
"2343242@qq.com";

• user.qq =
"111222";

• ## userData.push(user);

• //Insert data

• ## sqLite.insertUserData(userData);

• //Query

## db.transaction((tx)=>{
tx.executeSql(
• "select * from user ", [],(tx,results)=>{

##var len = results.rows.length;
•                                                      i);
  ##          
//Generally after the data is found, you may need to setState operation to re-render the page

•        alert(
"Name: "+u.name+
• ", Age: "+u.age+

  ", Phone: "+u.phone);

• } }

## });

• },(error)=>{

  //Print exception information

• ## Console.log(error);

•     });  

•   }  

•     render(){  

•         return null;  

•     }  

• } 

 

The above is the detailed content of Detailed explanation of examples of using Sqlite database in React Native. For more information, please follow other related articles on the PHP Chinese website!