Explication détaillée d'exemples d'utilisation de la base de données SQLite dans React Native

Les projets créés avec Sqllite peuvent être créés dans différents environnements. Par exemple, les projets créés avec Expo peuvent être différents de celui-ci ! Mais les idées spécifiques sont les mêmes. J’espère que cet article pourra aider tout le monde !

---

1.Installation

La ligne de commande entre dans le répertoire racine du projet ReactNative et exécute

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

2. Définissez les paramètres Gradle globaux

Modifiez le fichier android/settings.gradle et ajoutez le contenu suivant

include ':react-native-sqlite-storage'

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

3. Modifier le fichier android/app/build.gradle

Dans les dépendances, ajoutez un projet de compilation(':react-native-sqlite-storage')

4. Fichier .Java, Enregistrez le module sqlite dans MainActivitiy.java

import org.pgsqlite.SQLitePluginPackage;

[java] afficher la copie brute

1. @ Remplacer

2. liste protégée getPackages() {

3. return Arrays.< ;ReactPackage>asList(

4.                                         new SQLitePluginPackage() ,

   >

Nouveau BaidumAppackage (getApplicationContext ())

5. 🎜>
} 
7. La capture d'écran est la suivante :

Utiliser
pour écrire le fichier sqlite.js et introduire le composant import SQLiteStorage from 'react-native- sqlite-storage';Faites attention à chaque

exception d'impression, sinon vous ne verrez peut-être pas ce qui n'a pas fonctionné

[javascript] afficher la copie simple

1. importer React, {Component} depuis 'react';

2. importer{

3. ToastAndroid,

4. } depuis 'react-native' ;

5. importer SQLiteStorage depuis 'react-native-sqlite-storage';

6. SQLiteStorage.DEBUG(true);

7. var nom_base de données = "test.db";//Fichier de base de données

8. var database_version = "1.0";//Numéro de version

9. var database_displayname = "MySQLite"

10. var database_size = -1;//-1 Cela devrait signifier

11. var db

12. exportation par défaut class SQLite étend le composant{ 

13.  componentWillUnmount(){

if(db) {
this._successCB(
15. 'close');

    db.close(); 🎜> }

    else {
console (
17. "SQLiteStorage non ouvert"); 🎜>

    } open(){

18. db = SQLiteStorage.openDatabase(

nom_base de données,
version_base de données,
nom_display_base de données,
taille_base de données,
() =>{
                                                                                                                                                   🎜>

24. (err)=>{

26. });

27. return db; 🎜>

28. createTable(){

    if (!db) {
     
30. this.open();                                                                              🎜>

db.transaction((tx)=> {

31. tx.executeSql('CRÉER UNE TABLE SI N'EXISTE PAS UTILISATEUR(' +

32.   

    'id INTEGER PRIMARY KEY AUTOINCREMENT,' + 

33.    

    ' nom varchar, '+
                                            

36.  'téléphone VARCHAR' + 

37.  'e-mail VARCHAR' + 

38.                                                                                            🎜> ce. _successCB('executeSql');

}, (err)=> {

40.  this._errorCB('executeSql', euh

}) ;

42. }, (err)=> {//Toutes les transactions doivent avoir des méthodes de rappel d'erreur et imprimer des informations d'exception dans la méthode, sinon vous ne saurez peut-être pas ce qui n'a pas fonctionné .

43. this._errorCB(
'transaction', euh);
}, ()=> {

45. }) 

46.                                                    (!db) {

47. this.open();

}
db.transaction((tx )=>{
tx.executeSql(
50. 'supprimer de l'utilisateur',[],()=> ;{

});

52. }

53. dropTable(){

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

55. tx.executeSql(

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

57. });

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

    'transaction', err);

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

    'transaction'); 

 });

62. insertUserData(userData){

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

64. if (!db) {
66. this.open();

    }

67. this.createTable(); 🎜>

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

70.  

    var user = userData[i];
let name= user.name

72. laissez age = utilisateur.age

73. laissez sexe = utilisateur.sex;

74.         let phone = user.phone;  

75.         let email = user.email;  

76.         let qq = user.qq;  

77.         let sql = "INSÉRER INTO utilisateur (nom, âge, sexe, téléphone, e-mail, qq)"+  

78.         "valeurs(?,?,?,?,?,?)";  

79.         tx.executeSql(sql,[nom,âge,sexe,téléphone,e-mail,qq],()=>{  

81.           },(err)=>{  

82.             console.log(err);  

83.           }  

84.         );  

85.       }  

86.     },(erreur)=>{  

87.       ce ._errorCB('transaction', erreur);  

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

89.     },()=>{  

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

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

92.     });  

93.   }  

94.   close(){  

95.       if(db){  

96.           this._successCB('close');  

97.           db.close();  

98.       }else {  

99.           console.log("SQLiteStorage pas ouvert");  

100.       }  

101.       db = null ;  

102.   }  

103.   _successCB(name){  

104.     console.log("SQLiteStorage "+nom+" succès");  

105.   }  

106.   _errorCB(nom, erreur){  

107. console.log("SQLiteStorage "+nom);  

108.     console.log(err);  

109.   }  

110.     render(){  

111.         return null;  

112.     }  

113. } ;  

'réagir';  

• importer {  

•   AppRegistry,  

•   Texte,  

•   Affichage,  

•   Navigateur,  

•   StyleSheet,  

• } de 'react-native' ;  

• importer SQLite depuis './sqlite' ;  

• var sqLite = new SQLite();  

• var db;  

• class App étend 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(utilisateur);  

•     //插入数据  

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

•         }  

•       });  

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

•       console.log(erreur);  

•     });  

•   }  

•     render(){  

•         return null;  

•     }  

• } 

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!