2017-06-19 15:34:07 qq_25247589 阅读数 1504
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58314 人正在学习 去看看 李宁

借鉴了一位大佬的数据库测试操作操作,不过后来还是翻看官方文档看了不少东西

http://blog.csdn.net/xukongjing1/article/details/70141157以上是大佬的博客地址

主要是配置磨人 接下来开始说正经的

不过react-native这个实在文档易用性太差 出现bug可能是很简单的问题 就是难以解决

首先在项目文档里运行npm安装sqlite


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

然后修改配置


include ':react-native-sqlite-storage'

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

在图中文件内增加这一行


还是上述文件内增加这一行

compile project(':react-native-sqlite-storage')

注意有两个同名文件注意区别一个是app的一个是项目的增加在app下


在MainApplication中增加

new SQLitePluginPackage()
这一行
前期的配置好了 注意一定要重启一下虚拟机,一定,否则一定会有看不明白的报错!!!

接下来就是测试代码

其实下载的包里也有 可以改造相应的代码


以上是自带测试代码

接下来写自己的

在项目文件夹/db/下新建SQLite.js(自己创目录)

import React,{Component} from 'react';
import{
    ToastAndroid,
} from 'react-native';
import SQLiteStorage from 'react-native-sqlite-storage';
SQLiteStorage.DEBUG(true);
var database_name = "react.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 TIP(' +
                'id INTEGER PRIMARY KEY  AUTOINCREMENT,' +
                'name varchar,'+
                'class VARCHAR,' +
                'url VARCHAR,' +
                'measure VARCHAR,' +
                'place VARCHAR,' +
                'start VARCHAR,' +
                'end VARCHAR,' +
                'days 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 TIP',[],()=>{

            });
        });
    }
    dropTable(){
        db.transaction((tx)=>{
            tx.executeSql('drop table TIP',[],()=>{

            });
        },(err)=>{
            this._errorCB('transaction', err);
        },()=>{
            this._successCB('transaction');
        });
    }
    insertUserData(tipData){
        let len = tipData.length;
        if (!db) {
            this.open();
        }
        this.createTable();
        this.deleteData();
        db.transaction((tx)=>{
            for(let i=0; i<len; i++){
                var tip = tipData[i];
                let name= tip.name;
                let class_name = tip.class_name;
                let measure = tip.measure;
                let place = tip.place;
                let start = tip.start;
                let end = tip.end;
                let days = tip.days;
                let sql = "INSERT INTO TIP(name,class,measure,place,start,end,days)"+
                    "values(?,?,?,?,?,?,?)";
                tx.executeSql(sql,[name,class_name,measure,place,start,end,days],()=>{

                    },(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;
    }
};

这个是数据库工具方便之后调用 也看到的选择java web的数据封装方法 将数据字段封装成类 更加安全方便一些但我就部测试了

/**
 * Sam+-ple React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    Image,
    ScrollView,
    PixelRatio
} from 'react-native';
import Dimensions from "Dimensions";
var width = Dimensions.get('window').width;
var height= Dimensions.get('window').height;

import SQLite from "./db/SQLite";
var sqLite = new SQLite();
var db;
export default class TestProject extends Component {
    compennetDidUnmount(){
        sqLite.close();
    }
    componentWillMount(){
        //开启数据库
        if(!db){
            db = sqLite.open();
        }
        //建表
        sqLite.createTable();
        //删除数据
        sqLite.deleteData();
        //模拟一条数据
        var tipData = [];
        var tip = {};
        tip.name = "薰衣草";
        tip.class_name = "花卉";
        tip.measure = "5.5";
        tip.place = "6号温室花房";
        tip.start = "2017-6-27";
        tip.end = "2017-9-30";
        tip.days = "1314";
        tipData.push(tip);
        tipData.push(tip);
        tipData.push(tip);
        //插入数据
        sqLite.insertUserData(tipData);
        //查询
        db.transaction((tx)=>{
            tx.executeSql("select * from TIP", [],(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.class+"开始培育时间:"+u.start);
                }
            });
        },(error)=>{//打印异常信息
            console.log(error);
        });
    }

    render(){
        return(
            <ScrollView>
            
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({

});
AppRegistry.registerComponent('TestProject', () => TestProject);


2019-07-02 16:06:02 hzxOnlineOk 阅读数 30
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58314 人正在学习 去看看 李宁

原以为一个页面同时渲染20个接口导致的报错,报错信息提示,请求连接数用尽了(rpc-worker-thread-pool

 

以下是一个请求图片logo的接口getImage报错信息,由于联系人每个人都有自己的头像,受限于原有数据库,只能单独请求每个联系人的头像logo,因此一个页面请求了20多个接口

图片路径  {needReport: true, code: 555, msg: "服务异常", originMsg: "busy, discard message:rpc-worker-thread-pool[Activ…lSize=8, BlockingAtQueue=16/BlockingQueueSize=16]", resStatus: 406}

 

不曾想,这些都不是主要的原因,主要的原因是在api中间层组件中,使用了componentWillReceiveProps生命周期,由于没有限制好执行逻辑,导致了每次props变化,都触发了该生命周期函数,而我们又在该生命周期函数中,再次调用了请求资源的方法(在这里代入的话,就是getImage接口),这就造成了多发送了好几十次请求,资源直接被占用完。。。此问题排查了一天

2016-07-19 16:20:00 weixin_33872660 阅读数 6
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58314 人正在学习 去看看 李宁

  1. 检查连接的android设备

    android devices

2. 启动android studio

  android

3. 摇动手机选开发模式,填入server的ip和port

4. Parse Server

  数据库默认为dev,只要路径设定为这个,数据就能读出来

5. 单独启动react server

react-native start --reset-cache

6. npm 地址

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

转载于:https://www.cnblogs.com/qiangxia/p/5685301.html

2019-04-11 11:38:23 micotale 阅读数 393
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58314 人正在学习 去看看 李宁

 

来了新同事,运行项目报这个错。不用紧张,不是什么大问题,没接触过rn项目不知道怎么回事很正常~

 

这个错的含义就是,桐乡react-native的桥,找不到。意思就是连接不到rn代码

两种场景:

1.如果是正式包,就是bundle包没有打,rn的代码是需要打成bundle包,再加载进原生的,类似我们加载外部数据库,防盗asset目录这样子。

2.如果是debug包,就是没开启rn代码服务器,运行开启即可。

 

知道原因了,问题就迎刃而解,打bundle包 or  运行rn服务器,桥接代码。

2016-12-01 22:10:12 Bingtang_blog 阅读数 1057
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58314 人正在学习 去看看 李宁

使用SQLite的时候总是要在创建数据库的时候卡上半天,而且每次都是,之前都是直接复制别人博客上的代码,然后稍微改几个名字,今天结合Google官方教程中的推荐方法创建成功数据库,现在记录一下。

正确创建数据库与增删改查

详细请看这篇文章的后半段

这篇文章主要讲了如何正确创建数据库,如何正确的使用增删改查。
这里有几个注意点:

  • 使用SQL语句创建表格的时候不要使用SQL语句的关键字作为自定义的名字,比如不要使用create作为列的名字。
  • 如果数据库时,最好使用单例模式,传入Application的Context。

SQLite的更新和读取

经常会遇到在一个Activity里面向SQLite中写入数据,然后另一个Activity中马上将最新的变更读取出来,每次都坑,这里记录一下为什么坑。
首先我们看一下,一个写入的Activity退出和显示Activity的进入,它们所经历的的生命周期进程。

我们假设写入数据的Activity是C,显示最新数据的Activity的A,首先A启动C,然后C结束并重新进入A,整个过程的生命周期是这样的:
这里写图片描述
这里写图片描述

我们知道C调用onResume()方法后会正式显示出来,而C结束时,先调用onPause()方法,然后是A插进来调用一系列方法,然后C再调用剩下的方法结束自己。我在代码里以为是C结束,会全部结束,然后A在开始调用,其实实际看上去并不是这样的。

所以我在C的onStop()方法里写入数据,在A的onResume()方法里显示最新的数据,永远要A重新出现两次才可以显示,因为实际上并不是先调用C的onStop()方法,再调用A的onResume()方法,所以我们应该先在C的onPause()方法中写入数据,然后在A的onRestart()或onStart()或onResume()方法中显示数据即可。但是根据官方提示,在onPause()方法写入数据会拖累向下一个Activity的过渡,所以我们应该在onStop()方法中保存数据,但是如果我们下一个Activity要及时的显示最新的数据,我们还是应该调用onPause()方法来显示数据,否则调用onStop()方法就可以了

没有更多推荐了,返回首页