采用Sqllite大概用不一样的条件创制出来的档案的次序,举个例子说:用Expo创制的就或者和这么些不相仿!但是实际思路都是如出生机勃勃辙的,希望那篇文章能够协助到大家!
HTML5 Web 存款和储蓄 HTML5 应用程序缓存
HTML5 Web SQL 数据库
Web SQL 数据库 API 并非 HTML5
规范的意气风发某个,不过它是几个独立的正规化,引进了后生可畏组利用 SQL
操作顾客端数据库的 APIs。
只要您是多个 Web 后端程序员,应该超轻易领悟 SQL 的操作。
Web SQL 数据库能够在新型版的 Safari, Chrome 和 Opera 浏览器山西中华南理哲大学程集团作。
主干措施##\
以下是业内中定义的多个为主措施:
1.openDatabase:这一个艺术应用现成的数据库或许新建的数据库创制贰个数据库对象。
2.transaction:这些办法让我们能够决定一个作业,以致依据这种情景奉行提交或然回滚。
3.executeSql:那几个方式用于实施实际的 SQL 查询。
1.安装
开垦数据库##
大家得以行使 openDatabase()
方法来张开已存在的数据库,若是数据库官样文章,则会成立一个新的数据库,使用代码如下:
let db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
openDatabase() 方法对应的多少个参数表明:
数据库名称
版本号
叙述文本
数据库大小
创设回调
第多个参数,创造回调会在创造数据库后被调用。
命令行步入到ReactNative项目根目录下奉行
实践查询操作##
实行操作使用 database.transaction() 函数:
let db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
});
上边的口舌实行后会在 ‘mydb’ 数据库中创设一个名称为 LOGS 的表。
npm install
React-native-sqlite-storage
–save
布署数据##
在执行上边的创制表语句后,大家能够插入一些数目:
let db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “依依玖玥”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2,
“www.runoob.com“)’);
});
咱俩也得以采取动态值来插入数据:
let db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id,log) VALUES (?, ?)’, [e_id,
e_log]);
});
实例中的 e_id 和 e_log 是表面变量,executeSql
会映射数组参数中的各种条约给 “?”。
读取数据##
以下实例演示了怎么读取数据库中早已存在的数码:
let db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “依依玖玥”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2,
“www.runoob.com“)’);
});
db.transaction(function (tx) {
tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {
var len = results.rows.length, i;
msg = “
查询记录条数: ” + len + “
“;
document.querySelector(‘#status’).innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
全部实例
实例
let db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “依依玖玥”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2,
“www.runoob.com“)’);
msg = ‘
数据表已成立,且插入了两条数据。
‘;
document.querySelector(‘#status’).innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {
var len = results.rows.length, i;
msg = “
查询记录条数: ” + len + “
“;
document.querySelector(‘#status’).innerHTML += msg;
for (i = 0; i < len; i++){
msg = "
” + results.rows.item(i).log + “
“;
document.querySelector(‘#status’).innerHTML += msg;
}
}, null);
});
2.开展全局Gradle设置
删去记录##
剔除记录使用的格式如下:
db.transaction(function (tx) {
tx.executeSql(‘DELETE FROM LOGS WHERE id=1’);
});
删去钦点的数据id也得以是动态的:
db.transaction(function(tx) {
tx.executeSql(‘DELETE FROM LOGS WHERE id=?’, [id]);
});
编写 android/settings.gradle文件,增加以下内容
更新记录##
履新记录使用的格式如下:
db.transaction(function (tx) {
tx.executeSql(‘UPDATE LOGS SET
log=’www.w3cschool.cc’
WHERE id=2′);
});
履新钦赐的数码id也足以是动态的:
db.transaction(function(tx) {
tx.executeSql(‘UPDATE LOGS SET
log=’www.w3cschool.cc’
WHERE id=?’, [id]);
});
完全实例
实例
var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “依依玖玥”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2,
“www.runoob.com“)’);
msg = ‘
数据表已开立,且插入了两条数据。
‘;
document.querySelector(‘#status’).innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql(‘DELETE FROM LOGS WHERE id=1’);
msg = ‘
删除 id 为 1 的记录。
‘;
document.querySelector(‘#status’).innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql(‘UPDATE LOGS SET
log=’www.w3cschool.cc’
WHERE id=2′);
msg = ‘
更新 id 为 2 的记录。
‘;
document.querySelector(‘#status’).innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {
var len = results.rows.length, i;
msg = “
询问记录条数: ” + len + “
“;
document.querySelector(‘#status’).innerHTML += msg;
for (i = 0; i < len; i++){
msg = "
” + results.rows.item(i).log + “
“;
document.querySelector(‘#status’).innerHTML += msg;
}
}, null);
});
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
- @Override
- protected List<ReactPackage> getPackages() {
- 澳门葡京, return Arrays.<ReactPackage>asList(
- new MainReactPackage(),
- new SQLitePluginPackage(),
- new BaiduMapPackage(getApplicationContext())
- );
- }
截图如下:
5.使用
编写sqlite.js文件,引进组件
import SQLiteStorage from
‘react-native-sqlite-storage’;
瞩目每叁个打印卓殊,不然大概看不到哪个地方出错了
[javascript] view
plain
copy
- import React,{Component} from ‘react’;
- import{
- ToastAndroid,
- } from ‘react-native’;
- import SQLiteStorage from ‘react-native-sqlite-storage’;
- SQLiteStorage.DEBUG(true);
- var database_name = “test.db”;//数据库文件
- var database_version = “1.0”;//版本号
- var database_displayname = “MySQLite”;
- var database_size = -1;//-1应该是表示最好制
- var db;
- export default class SQLite extends Component{
- componentWillUnmount(){
- if(db){
- this._successCB(‘close’);
- db.close();
- }else {
- console.log(“SQLiteStorage not open”);
- }
- }
- open(){
- db = SQLiteStorage.openDatabase(
- database_name,
- database_version,
- database_displayname,
- database_size,
- ()=>{
- this._successCB(‘open’);
- },
- (err)=>{
- this._errorCB(‘open’,err);
- });
- return db;
- }
- createTable(){
- if (!db) {
- this.open();
- }
- //创设客户表
- db.transaction((tx)=> {
- tx.executeSql(‘CREATE TABLE IF NOT EXISTS USER(‘ +
- ‘id INTEGER PRIMARY KEY AUTOINCREMENT,’ +
- ‘name varchar,’+
- ‘age VARCHAR,’ +
- ‘sex VARCHAR,’ +
- ‘phone VARCHAR,’ +
- ’email VARCHAR,’ +
- ‘qq VARCHAR)’
- , [], ()=> {
- this._successCB(‘executeSql’);
- }, (err)=> {
- this._errorCB(‘executeSql’, err);
- });
- }, (err)=> {//全体的 transaction都应有有错误的回调方法,在艺术里面打字与印刷万分音信,不然你只怕不会驾驭哪个地方出错了。
- this._errorCB(‘transaction’, err);
- }, ()=> {
- this._successCB(‘transaction’);
- })
- }
- deleteData(){
- if (!db) {
- this.open();
- }
- db.transaction((tx)=>{
- tx.executeSql(‘delete from user’,[],()=>{
- });
- });
- }
- dropTable(){
- db.transaction((tx)=>{
- tx.executeSql(‘drop table user’,[],()=>{
- });
- },(err)=>{
- this._errorCB(‘transaction’, err);
- },()=>{
- this._successCB(‘transaction’);
- });
- }
- insertUserData(userData){
- let len = userData.length;
- if (!db) {
- this.open();
- }
- this.createTable();
- this.deleteData();
- db.transaction((tx)=>{
- for(let i=0; i<len; i++){
- var user = userData[i];
- let name= user.name;
- let age = user.age;
- let sex = user.sex;
- let phone = user.phone;
- let email = user.email;
- let qq = user.qq;
- let sql = “INSERT INTO user(name,age,sex,phone,email,qq)”+
- “values(?,?,?,?,?,?)”;
- tx.executeSql(sql,[name,age,sex,phone,email,qq],()=>{
- },(err)=>{
- console.log(err);
- }
- );
- }
- },(error)=>{
- this._errorCB(‘transaction’, error);
- ToastAndroid.show(“数据插入战败”,ToastAndroid.SHORT);
- },()=>{
- this._successCB(‘transaction insert data’);
- ToastAndroid.show(“成功插入 “+len+” 条客商数量”,ToastAndroid.SHORT);
- });
- }
- close(){
- if(db){
- this._successCB(‘close’);
- db.close();
- }else {
- console.log(“SQLiteStorage not open”);
- }
- db = null;
- }
- _successCB(name){
- console.log(“SQLiteStorage “+name+” success”);
- }
- _errorCB(name, err){
- console.log(“SQLiteStorage “+name);
- console.log(err);
- }
- render(){
- return null;
- }
- };
‘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<len; i++){
- var u = results.rows.item(i);
- //日常在数据查出来以往, 恐怕要 setState操作,重新渲染页面
- alert(“姓名:”+u.name+”,年龄:”+u.age+”,电话:”+u.phone);
- }
- });
- },(error)=>{//打字与印刷至极消息
- console.log(error);
- });
- }
- render(){
- return null;
- }
- }
笔者介绍:半路学IT,做开辟3年,先下车在一家分享单车公司,做后台开荒!
我开了叁个大伙儿号,接待各位有志趣相投朋友,关注!不定时分享工作,和本人得故事!