Detaillierte Erläuterung von Beispielen für die Verwendung der SQLite-Datenbank in React Native

Mit SQLite erstellte Projekte können in anderen Umgebungen erstellt werden. Beispielsweise können sich mit Expo erstellte Projekte von dieser unterscheiden! Aber die konkreten Ideen sind die gleichen. Ich hoffe, dieser Artikel kann allen helfen!

---

1. Installation

Die Befehlszeile gibt das Stammverzeichnis des ReactNative-Projekts ein und führt

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

aus

2. Nehmen Sie globale Gradle-Einstellungen vor

Bearbeiten Sie die Datei android/settings.gradle und fügen Sie die hinzu folgender Inhalt

include ':react-native-sqlite-storage'

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

3. Ändern Sie die Datei android/app/build.gradle

In Abhängigkeiten Kompilierungsprojekt hinzufügen(':react-native-sqlite-storage')

4. Bearbeiten Sie die Hauptanwendung .Java-Datei, Registrieren Sie das SQLite-Modul in MainActivitiy.java

import org.pgsqlite.SQLitePluginPackage;

[java]Klartext anzeigen

1. @ Override

2. protected List getPackages() {

3. return Arrays.< ;ReactPackage>asList(

4.                                       new SQLitePluginPackage() , >

5. Neues BaidumAppackage (getApplicationContext ())

); 🎜>
6. } 

7. Der Screenshot sieht wie folgt aus:

5 🎜>
Um die Datei sqlite.js zu schreiben und die Komponente einzuführen, importieren Sie SQLiteStorage aus „react-native-sqlite-storage“;Achten Sie darauf jede

Druckausnahme, sonst sehen Sie möglicherweise nicht, was schief gelaufen ist

[Javascript]Klartext anzeigen

1. import React,{Component} from 'react'; import{

2. ToastAndroid,
   } from
'react-native'; >

3. import SQLiteStorage from
'react-native-sqlite-storage';
SQLiteStorage.DEBUG(
5. true);
   var Database_name =
"test.db";
6. //Datenbankdatei

7. var Database_version = "1.0";//Versionsnummer

8. var Database_displayname = "MySQLite";

9. var Database_size = -1;

   //-1 Es sollte unbegrenzten

10. var db
    exportieren
bedeuten default
11. class SQLite

    extends Component{ if(db){

12. this._successCB('close '); db.close();

}
13. else {

14. console. log("SQLiteStorage not open"); open(){

15. db = SQLiteStorage.openDatabase( Datenbankname,

16. Datenbankversion,

17. Datenbankanzeigename,

Datenbankgröße,

18. () =>{

19.                                                                                                                                               🎜>

(err)=>{
});
23. return db; {

24. if (!db) {

25.      
this.open();                                                                              🎜>

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

27. tx.executeSql(
'CREATE TABLE IF NOT EXISTS USER(' +

28.   'id INTEGER PRIMARY KEY AUTOINCREMENT,' + 

29.    
' name varchar, '+
31.                                           

32.   'phone VARCHAR,' + 

33.                           >                                                                          🎜> this._successCB(

    'executeSql');

34. }, (err)=> ._errorCB(
'executeSql', err);

36. }, (err )=> {//Alle Transaktionen sollten Fehlerrückrufmethoden haben und Ausnahmeinformationen in der Methode ausgeben, sonst wissen Sie möglicherweise nicht, was schief gelaufen ist.

37. this._errorCB(

    'transaction', err);

38. }, ()=> {

39. }) 

40.                                       

41. this.open();

    }

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

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

});

45. }

46. dropTable(){

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

48. tx.executeSql(

    'drop table user',[],()=> ;{

50. });

51. },(err)= >{ ._errorCB(

    'transaction', err);

52. },()=>{ > 

    this._successCB(
'transaction'); 

54.  });

55. insertUserData(userData){

56. let len ​​​​= userData.length;

57. if (!db) {

58. this.open();
}
61. this.createTable(); 🎜>

62. this.deleteData(); > db.transaction((tx)=>{

 
64. var user = userData[i];

    let name= user.name; >

65. let age = user.age;

66. let sex = user.sex;

67.         let phone = user.phone;  

68.         let email = user.email;  

69.         let qq = user.qq;  

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

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

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

74.           },(err)=>{  

75.             console.log(err);  

76.           }  

77.         );  

78.       }  

79.     },(error)=>{  

80.       dies ._errorCB('transaction', error);  

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

82.     },()=>{  

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

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

85.     });  

86.   }  

87.   close(){  

88.       if(db){  

89.           this._successCB('close');  

90.           db.close();  

91.       }else {  

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

93.       }  

94.       db = null;  

95.   }  

96.   _successCB(name){  

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

98.   }  

99.   _errorCB(name, err){  

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

101.     console.log(err);  

102.   }  

103.     render(){  

104.         return null;  

105.     }  

106. };  

'reagieren';  

• importieren {  

•   AppRegistry,  

•   Text,  

•   Ansicht,  

•   Navigator,  

•   StyleSheet,  

• } von 'react-native';  

• SQLite aus './sqlite' importieren;  

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

•     }  

• } 

 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für die Verwendung der SQLite-Datenbank in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!