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模組

2. import org.pgsqlite.SQLitePluginPackage;

#[java]
4. view plain copy

##@ Override  

5.     

6. #    

   #protected List getPackages() {  
7. 1

   ##1 ;ReactPackage>asList(  

8.           
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';  

5. ## import{  

     ToastAndroid,  

6. } from 'react-native';  

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

9. SQLiteStorage.DEBUG(

10. SQLiteStorage.DEBUG(

    #SQLiteStorage.DEBUG(

    true);  

11. var database_name = 
"test.db";
12. //資料庫檔案  

    #var database_version = 

##var database_version = 
13. #"1.0";

    //版本編號  

18. var database_displayname = 

    "MySQLite";  

19. ##var database_size = -1;

20. #var database_size = -1;

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

22. var db;  

23. export 
default 
24. class  SQLite 

    extends Component{  

26.     componentWillUn(){ 

#    componentWillUn(){ 

27. #  

        
if(db){  

28.         #this._successCB(

    'close');   
#this._successCB(
29. 'close');

#        db.close();  
    }
31. else {  

     # log("SQLiteStorage not open");  

32.     }  

33.   }  

#  

37. #CC   open(){  

38.     db = SQLiteStorage.openDatabase(  

39.     ##o_

 #      database_version,  
      database_displayname,  

41.   {  

42.           this._successCB('open');  

43. ##  

    ##      (err)=>{  

44.           #this。

45.       });  

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

46.           'phone VARCHAR,' +  

47.      #          

    'qq VARCHAR)'  

48. #      ##              

    this._successCB(
'executeSql');  

49. ## ## 

              
50. this._errorCB(

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

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

    'transaction', err);  

67. }, ()=> {  

68.         

    this._successCB(
'transaction');  

70.     })  

71.     }  

72.   deleteData(){  #" ##  deleteData(){  

    # (!db) {  
        

74. #        
this.open();  
76.   

    #    db.transaction((tx)=>{  

          tx.executeSql(
'delete fromuser',[], user',[], >& ;{  

78. #      });  

79.      

  }  
  dropTable(){  
    db.transaction((tx)=>{  ##    db.transaction((tx)=>{  
83. ##      tx.executeSql(

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

84.       });  

85.     },(err)=>{  
86. ## ._errorCB(

    'transaction', err);  

87. #    },()=>{  

# #      
88. this._successCB(

    'transaction');  

89.     });  

90. ##    });  

    ## 

91.     insertUserData(userData){  

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

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

94.         讓phone = user.phone;  

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

96.         讓 qq = user.qq;  

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

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

128. #        );  

129.       }  

130.     }，(錯誤)=>{  

131. ##  # _errorCB('交易', 錯誤);  

132.       ToastAndroid.show(

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

133. ##    },()=>{  

      ###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中文網其他相關文章！