首页 > web前端 > js教程 > 正文

React Native中使用Sqlite数据库的实例详解

零下一度
发布: 2017-06-24 14:35:13
原创
3293 人浏览过
使用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模块

import org.pgsqlite.SQLitePluginPackage;

[java] view plain copy
  1. @Override  

  2.     protected List getPackages() {  

  3.       return Arrays.asList(  

  4.           new MainReactPackage(),  

  5.           new SQLitePluginPackage(),  

  6.           new BaiduMapPackage(getApplicationContext())  

  7.       );  

  8.     }  

截图如下:

5.使用

编写sqlite.js文件,引入组件     import SQLiteStorage from 'react-native-sqlite-storage';

注意每一个打印异常,不然可能看不到哪里出错了

[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';  

  6. SQLiteStorage.DEBUG(true);  

  7. var database_name = "test.db";//数据库文件  

  8. var database_version = "1.0";//版本号  

  9. var database_displayname = "MySQLite";  

  10. var database_size = -1;//-1应该是表示无限制  

  11. var db;  

  12. export default class  SQLite extends Component{  

  13.     componentWillUnmount(){  

  14.     if(db){  

  15.         this._successCB('close');  

  16.         db.close();  

  17.     }else {  

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

  19.     }  

  20.   }  

  21.   open(){  

  22.     db = SQLiteStorage.openDatabase(  

  23.       database_name,  

  24.       database_version,  

  25.       database_displayname,  

  26.       database_size,  

  27.       ()=>{  

  28.           this._successCB('open');  

  29.       },  

  30.       (err)=>{  

  31.           this._errorCB('open',err);  

  32.       });  

  33.     return db;  

  34.   }  

  35.   createTable(){  

  36.     if (!db) {  

  37.         this.open();  

  38.     }  

  39.     //创建用户表  

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

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

  42.           'id INTEGER PRIMARY KEY  AUTOINCREMENT,' +  

  43.           'name varchar,'+  

  44.           'age VARCHAR,' +  

  45.           'sex VARCHAR,' +  

  46.           'phone VARCHAR,' +  

  47.           'email VARCHAR,' +  

  48.           'qq VARCHAR)'  

  49.           , [], ()=> {  

  50.               this._successCB('executeSql');  

  51.           }, (err)=> {  

  52.               this._errorCB('executeSql', err);  

  53.         });  

  54.     }, (err)=> {//所有的 transaction都应该有错误的回调方法,在方法里面打印异常信息,不然你可能不会知道哪里出错了。  

  55.         this._errorCB('transaction', err);  

  56.     }, ()=> {  

  57.         this._successCB('transaction');  

  58.     })  

  59.     }  

  60.   deleteData(){  

  61.     if (!db) {  

  62.         this.open();  

  63.     }  

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

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

  66.       });  

  67.     });  

  68.   }  

  69.   dropTable(){  

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

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

  72.       });  

  73.     },(err)=>{  

  74.       this._errorCB('transaction', err);  

  75.     },()=>{  

  76.       this._successCB('transaction');  

  77.     });  

  78.   }  

  79.     insertUserData(userData){  

  80.     let len = userData.length;  

  81.     if (!db) {  

  82.         this.open();  

  83.     }  

  84.     this.createTable();  

  85.     this.deleteData();  

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

  87.        for(let i=0; i

  88. var user = userData[i];

  89. let name= user.name;

  90. let age = user.age;

  91. let sex = user.sex;

  92. let phone = user.phone;

  93. let email = user.email;

  94. let qq = user.qq;

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

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

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

  98.           },(err)=>{  

  99.             console.log(err);  

  100.           }  

  101.         );  

  102.       }  

  103.     },(error)=>{  

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

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

  106.     },()=>{  

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

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

  109.     });  

  110.   }  

  111.   close(){  

  112.       if(db){  

  113.           this._successCB('close');  

  114.           db.close();  

  115.       }else {  

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

  117.       }  

  118.       db = null;  

  119.   }  

  120.   _successCB(name){  

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

  122.   }  

  123.   _errorCB(name, err){  

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

  125.     console.log(err);  

  126.   }  

  127.     render(){  

  128.         return null;  

  129.     }  

  130. };  

'react';  

  • import {  

  •   AppRegistry,  

  •   Text,  

  •   View,  

  •   Navigator,  

  •   StyleSheet,  

  • } from 'react-native';  

  • import SQLite from './sqlite';  

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

  •     }  

 

以上是React Native中使用Sqlite数据库的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!