首頁  >  文章  >  web前端  >  React Native中使用Sqlite資料庫的實例詳解

React Native中使用Sqlite資料庫的實例詳解

零下一度
零下一度原創
2017-06-24 14:35:133301瀏覽
使用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模組
  1. import org.pgsqlite.SQLitePluginPackage;

  2. #[java]
  3. view plain copy

  4. ##@ Override  
  5.     
  6. #    

    #protected List getPackages() {  
  7. 1

    ##1 ;ReactPackage>asList(  

  8.           
  9. new MainReactPackage(),  #o#SQL
F>MainReactPackage(),  # ,  

          new BaiduMapPackage(getApplicationContext())  
    }  

#截圖如下:

#############5.使用################寫sqlite.js檔,引入元件    import SQLiteStorage from 'react-native- sqlite-storage';############注意每一個###列印異常,不然可能看不到哪裡出錯了############### #####[javascript]### view plain copy###
  1. import React,{Component} from 'react';  

  2. ## import{  

      ToastAndroid,  
  3. } from 'react-native';  

  4. ##1 #import SQLiteStorage from 'react-native-sqlite-storage';  

  5. SQLiteStorage.DEBUG(

  6. SQLiteStorage.DEBUG(

    #SQLiteStorage.DEBUG(

    true);  
  7. var database_name = 
  8. "test.db";
  9. //資料庫檔案  

    #var database_version = 

  10. ##var database_version = 
  11. #"1.0";

    //版本編號  

  12. var database_displayname = 

    "MySQLite";  

  13. ##var database_size = -1;

  14. #var database_size = -1;

    ///-1應該是表示無限制  

  15. var db;  

  16. export 
  17. default 
  18. class  SQLite 

    extends Component{  

  19.     componentWillUn(){ 

  20. #    componentWillUn(){ 
  21. #  

        
  22. if(db){  
  23.         #this._successCB(

    'close');   
  24. #this._successCB(
  25. 'close');

  26. #        db.close();  
  27.     }
  28. else {  

     # log("SQLiteStorage not open");  

  29.     }  

  30.   }  

  31. #  
  32. #CC   open(){  

  33.     db = SQLiteStorage.openDatabase(  

  34.     ##o_

  35.  #      database_version,  
  36.       database_displayname,  
  37.   {  

  38.           this._successCB('open');  

  39. ##  

    ##      (err)=>{  
  40.           #this。

  41.       });  

    ###    ###return db;  ######## ###########  createTable(){  #############    ###if (!db) {  ########################################################################################################################################################################################################################################' #        ###this.open();  ###############    }  #############   ###########    db.transaction((tx)=> {  ############      tx.executeSql(#ERP)ATE +  ###############          ###'id INTEGER PRIMARY KEY  AUTOINC '+  ###############          ###'age VARCHAR,' +  ######" ######
  42.           'phone VARCHAR,' +  

  43.      #          

    'qq VARCHAR)'  
  44. #      ##              

    this._successCB(
  45. 'executeSql');  
  46. ## ## 

  47.               
  48. this._errorCB(

    'executeSql', err);       }, (err)=> {

    //所有的 transaction都應該有錯誤的回呼方法,在方法裡面打印異常訊息,不然你可能不會知道哪裡出錯了。
  49.         
  50. this._errorCB(

    'transaction', err);  

  51. }, ()=> {  

  52.         

    this._successCB(
  53. 'transaction');  
  54.     })  

  55.     }  

  56.   deleteData(){  #" ##  deleteData(){  

    # (!db) {  
  57.         
  58. #        
  59. this.open();  
  60.   

    #    db.transaction((tx)=>{  

          tx.executeSql(
  61. 'delete fromuser',[], user',[], >& ;{  
  62. #      });  

  63.      

  64.   }  
  65.   dropTable(){  
  66.     db.transaction((tx)=>{  ##    db.transaction((tx)=>{  
  67. ##      tx.executeSql(

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

  68.       });  
  69.     },(err)=>{  
  70. ## ._errorCB(

    'transaction', err);  

  71. #    },()=>{  

  72. # #      
  73. this._successCB(

    'transaction');  

  74.     });  

  75. ##    });  

    ## 

  76.     insertUserData(userData){  

  77.     let len = userData.le #  #if (!db) {  

  78.         ###this.open();  ############ #########    ###this.createTable();  ###############    ####this.deleteData();  #######################################################################################################################################移動#####移動移動######移動#######’ #######    db.transaction((tx)=>{  ############       ###for(let i=0;” ############        ###var user = userData[i];  ###############     #######        let age = user.age;  ############       ,
  79.         讓phone = user.phone;  

  80.         讓電子郵件 = user.email;  

  81.         讓 qq = user.qq;  

  82.         let sql = "插入使用者(姓名、年齡、性別、電話、電子郵件、QQ)"+  

  83. #        
  84. "值(?,?,?,?,?,?)";  
  85. ##        tx.executeSql(sql,[姓名,年齡,性別,電話,信箱,QQ],()=>{  
  86.           },(err)=>{  

             ##          }  
  87. #        );  
  88.       }  
  89.     },(錯誤)=>{  
  90. ##  # _errorCB('交易', 錯誤);  

  91.       ToastAndroid.show(

    "資料插入失敗",ToastAndroid.SHORT);  

  92. ##    },()=>{  

      ###this._successCB(###'交易插入資料' );  ##################      ToastAndroid.show(###"成功插入 "+len+###" 條使用者資料",ToastAndroid.SHORT);  ##################    });  ############  }  #############  close(){  ############T      # ##############          ###this._successCB(###'close');  ##################          db.close();  ############      }####else {  ################          con中.  ###############      }  ############      db = ####null;  ###############  }  #############  _successCB(姓名){  #############    console.log(#############    console.log(#############    console.log(#############    console.log(# ##"SQLiteStorage"+名稱+###"成功");  ##################  }  #############  _errorCB(名稱, err){  ##################### console.log(###"SQLiteStorage"+名稱);  ###############    console.log(err);  ############  }  #############    render(){  ############         ##################    }  ############};  ############

'react';  

  • import {  

  •   AppRegistry,  

  • ##  AppRegistry,  
  •   Text,  
  • ## 

    ##  Navigator,  
  • #  StyleSheet,  
  • #} from 'react-native';

  • import SQLite from 
  • './sqlite';  

  • #var sqLite = new SQLite();  

  • #class App 
  • extends Component{  
  •     compennetDidUnmount(){  
  •  );  

  •   }  
  •   componentWillMount(){  

  •     

    if(!db){  

  •       db = sqLite.open();     db = sqLite.open();

        }  

  • #    

    //建置表單  
  • #    sqLite.

  •   .createTable();
  •     //刪除資料  

  •     sqLite.deleteData();  
  • 如果

    ##如果#如果#如果#如果

    如果
  • ##如果

    如果#如果
  • #如果

    如果如果
  • 如果如果#L1都。 ##    

    //模擬一條資料  
  • ###    ###var userData = [];  ####### ##var user = {};  ################    user.name = ###"張三";  ###########################################################################################################################################################################################################################################1 user.age = ###"28";  ###############    user.sex = ###"男";  ############# ##    user.phone = ###"18900001111";  ###############    user.e = #mail##"2343242@qq#> ########    user.qq = ###"111222";  ###############    userData.push(user)  #####    userData.push(user) ###    ###//插入資料  ###############    sqLite.insertUserData(userData);  ######## ###############    db.transaction((tx)=>{  ############      tx.executeSql(###"select     tx.executeSql(###"select     tx.executeSql(###"select * *user ", [],(tx,results)=>{  ###############       ###var len ########## results.os.length; ######        ###for(let i=0; i
  •     });  

  •   }  

  •     render(){  

  •         return null;  

  •     }  

 

以上是React Native中使用Sqlite資料庫的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn