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

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] 일반 사본 보기

2. @재정의

3. rotected list & lt; reactpackage & gt;

4. }

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

7. 5.

   sqlite.js 파일을 작성하고 SQLiteStorage 가져오기 구성요소를 소개합니다. from 'react-native-sqlite-storage';

8. 모든
인쇄 예외에 주의하세요. 그렇지 않으면 무엇이 잘못되었는지 알 수 없습니다.

[javascript] 일반 사본 보기

1. import React,{Component} from

2. import{ ToastAndroid,

} from
3. 'react-native';

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

5. SQLiteStorage.DEBUG(

   true);

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

   //데이터베이스 파일

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

8. var Database_displayname = "MySQLite";

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

10. var db

export
11. default

    class SQLite extends Component{

12.  comComponentWillUnmount(){ if(db ){

14. }else {

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

16. }

17. }
    오픈() {

18. db = SQLiteS torage.openDatabase(

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

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

    '열기');

(err)=>{

25. return db;
}
createTable() {

28. if (!db) {

29. this.open() }
//사용자 테이블 생성

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

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

33. E m'Name Varchar, '+

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

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

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

    this._successCB(
'transaction');

42. }) }

43. deleteData(){

44. if (!db) {

This.open();
46. }
    db.transaction((tx)=>{

47. })

    }

48. dropTable(){

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

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

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

54. });

    }

55. insertUserData(userData) {

56. len ​​= userData.length;

57. if (!db) {

}
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],()=>{  

70.           },(err)=>{  

71.             console.log(err);  

72.           }  

73.         );  

74.       }  

75.     },(error)=>{  

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

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

78.     },()=>{  

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

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

81.     });  

82.   }  

83.   close(){  

84.       if(db){  

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

86.           db.close();  

87.       }else {  

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

89.       }  

90.       db = null;  

91.   }  

92.   _successCB(이름){  

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

94.   }  

95.   _errorCB(이름, err){  

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

97.     console.log(err);  

98.   }  

99.     render(){  

100.         return null;  

101.     }  

102. };  

'반응';

• 가져오기 텍스트,

• 보기,

• 내비게이터,

• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!