> 웹 프론트엔드 > JS 튜토리얼 > React Native에서 Sqlite 데이터베이스를 사용하는 예제에 대한 자세한 설명

React Native에서 Sqlite 데이터베이스를 사용하는 예제에 대한 자세한 설명

零下一度
풀어 주다: 2017-06-24 14:35:13
원래의
3345명이 탐색했습니다.
Sqllite를 사용하여 만든 프로젝트는 다른 환경에서 생성될 수 있습니다. 예를 들어 Expo를 사용하여 만든 프로젝트는 이와 다를 수 있습니다! 하지만 구체적인 아이디어는 동일합니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

1. Install

명령줄은 ReactNative 프로젝트의 루트 디렉터리에 들어가서

npm install React-native-sqlite-s를 실행합니다. 스토리지 --s ave

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. /app/build.gradle 파일

종속성 컴파일 프로젝트 추가(':react-native-sqlite-storage')


4 . MainApplication.Java 파일을 편집합니다. MainActivitiy.java

import org.pgsqlite.SQLitePluginPackage;

[java] 일반 사본 보기
  1. @재정의

  2. rotected list & lt; reactpackage & gt;

  3. }

  4. 스크린샷은 다음과 같습니다.

  5. 5.

    sqlite.js 파일을 작성하고 SQLiteStorage 가져오기 구성요소를 소개합니다. from 'react-native-sqlite-storage';
  6. 모든
  7. 인쇄 예외에 주의하세요. 그렇지 않으면 무엇이 잘못되었는지 알 수 없습니다.

[javascript] 일반 사본 보기

  1. import React,{Component} from

  2. import{ ToastAndroid,

  3. } from
  4. 'react-native';

  5. 다음에서 SQLiteStorage 가져오기
  6. 'react-native-sqlite-storage';

  7. SQLiteStorage.DEBUG(

    true);

  8. var 데이터베이스 이름 =
  9. "test.db";

    //데이터베이스 파일

  10. var Database_version = "1.0";//버전 번호

  11. var Database_displayname = "MySQLite";

  12. var 데이터베이스_ 크기 = -1 ;//- 1은 무제한

  13. var db

  14. export
  15. default

    class SQLite extends Component{

  16.  comComponentWillUnmount(){ if(db ){

  17. }else {

  18. console.log("SQLiteStorage가 열리지 않음")

  19. }

  20. }

    오픈() {
  21. db = SQLiteS torage.openDatabase(

  22. 데이터베이스_이름,

  23. E 데이터베이스_버전,
  24. 데이터베이스_디스플레이이름,
  25. 데이터베이스_크기,
  26. () = & gt;
  27. This._successcb (

    '열기');

  28. (err)=>{
  29. return db;
  30. }
  31. createTable() {
  32. if (!db) {

  33. this.open() }
  34. //사용자 테이블 생성
  35. db.transaction((tx)=> {

  36. 'id 정수 기본 키 자동 증가,' +

  37. E m'Name Varchar, '+

  38.                                    전화 VARCHAR,' +                                 VARCHAR)' , [], ()=> { " ​​​​​​​

    this._errorCB(
  39. 'executeSql', err);​ ​​​​​​​
  40. });,}, (err) = & gt; { // 모든 트랜잭션에는 잘못된 콜백 메소드가 있어야 하며 메소드에 비정상적인 정보를 인쇄해야 합니다. 그렇지 않으면 어디에서 실수를 해야 할지 모를 수도 있습니다. ​​​

    this._successCB(
  41. 'transaction');
  42. }) }

  43. deleteData(){

  44. if (!db) {

  45. This.open();
  46. }

    db.transaction((tx)=>{
  47. })

    }
  48. dropTable(){
  49. db.transaction((tx)=>{

    tx.executeSql(
  50. 'drop table user',[] ,() => CB(
  51. 'transaction', 오류);

  52. },()=>{
  53. this._successCB(
  54. 'transaction')

  55. });

    }

  56. insertUserData(userData) {

  57. len ​​= userData.length;

  58. if (!db) {

  59. }
  60. this.createTable( ); ;len; i++){

    SVar 사용자 = userdata [i];

  61. let name = user.name;
  62. let age = user.sex;
  63.         let phone = user.phone;  

  64.         let email = user.email;  

  65.         let qq = user.qq;  

  66.         let sql = "INSERT INTO 사용자(이름, 나이, 성별, 전화, 이메일, qq)"+  

  67.         "값(?,?,?,?,?,?)";  

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

  69.           },(err)=>{  

  70.             console.log(err);  

  71.           }  

  72.         );  

  73.       }  

  74.     },(error)=>{  

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

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

  77.     },()=>{  

  78.       this._successCB('트랜잭션 삽입 데이터');  

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

  80.     });  

  81.   }  

  82.   close(){  

  83.       if(db){  

  84.           this._successCB( '닫기');  

  85.           db.close();  

  86.       }else {  

  87.           console.log("SQLiteStorage가 열리지 않음");  

  88.       }  

  89.       db = null;  

  90.   }  

  91.   _successCB(이름){  

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

  93.   }  

  94.   _errorCB(이름, err){  

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

  96.     console.log(err);  

  97.   }  

  98.     render(){  

  99.         return null;  

  100.     }  

  101. };  

'반응';

  • 가져오기 텍스트,

  • 보기,

  • 내비게이터,

  • StyleSheet,

  • } from

    ' 반응 네이티브';
  • './sqlite'에서 SQLite 가져오기; var sqlite =
  • var db;
  • 수업 앱 확장 구성 요소{

  • compennetDidUnmount(){

    sqLite.close()

  • }

    구성 요소WillMount(){
  • //데이터베이스 열기

  • if(!db){

  • db = sqlite.open()
  • }
  • //테이블 빌드
  • sqlLite.createTable();
  • / /데이터 삭제

  • sqLite.deleteData()
  • //데이터 시뮬레이션
  • var userData = []
  • var 사용자 = {};

  • user.name =

    "张三";

  • user.age =

  • user.sex = "남성";

    사용자 .phone =
  • "18900001111";
  • user.email =
  • "2343242@qq.com";
  •   user.qq =
  • "111222";
  • userData.push(사용자 );

  • //데이터 삽입

  • sqLite.insertUserData(userData)

  • //쿼리
  • db.transaction((t x)=>{
  • tx.executeSql("select * from user", [],(tx, results)=>{

  • var len = 결과 .rows.length;
  • for(let i =0; i

  • var u = results.rows.item(i)

  • ​​​​

    / /일반적으로 데이터를 찾은 후 페이지를 다시 렌더링하려면 setState 작업이 필요합니다.

    "Name: "+u.name+
  • ", Age: "+u.age+
  • ", Phone: "+u .phone

  • }

  • });
  • },(error)=>{

    //예외 정보 인쇄
  •            console.log(error);

  •     });  

  •   }  

  •     render(){  

  •         return null;  

  •     }  

 

위 내용은 React Native에서 Sqlite 데이터베이스를 사용하는 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿