React NativeでのSqliteデータベースの利用例を詳しく解説

Sqllite を使用して作成されたプロジェクトは、異なる環境で作成される場合があります。たとえば、Expo を使用して作成されたプロジェクトは、これとは異なる場合があります。しかし、具体的なアイデアは同じです。この記事が皆さんのお役に立てれば幸いです。

---

1. インストール

コマンドラインは ReactNative プロジェクトのルートディレクトリに入り、

npm install React-native-sq を実行します。ライトストレージ --s ave

2. グローバル Gradle 設定を作成します

android/settings.gradle ファイルを編集し、次の内容を追加します

「:react-native-sqlite-storage」

プロジェクトを含めます(':react-native -sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')

3. Android を変更します。 /app/build.gradle ファイル

依存関係を追加コンパイルプロジェクト(':react-native-sqlite-storage')

4 MainApplication.Java ファイルを編集し、MainActivitiy.java に sqlite モジュールを登録しますimport org.pgsqlite.SQLitePluginPackage;

[java]

プレーンコピーを表示

@Override

1. protected List getPackages() {

2. return Arrays.asList(

3. new SQLitePluginPackage()、

4. }

5. スクリーンショットは次のとおりです:

7. 5 を使用します。
sqlite.js ファイルを作成し、コンポーネント import SQLiteStorage を導入しますfrom 'react-native-sqlite-storage';
すべての

print 例外に注意してください。そうしないと、何が問題になったのか分からなくなる可能性があります

[javascript]
プレーンコピーを表示

1. import React,{Component} from 'react';

SQLiteStorage をインポートする
2. 'react-native-sqlite-storage';

3. SQLiteStorage.DEBUG(

   true);

4. var データベース名 =

   "test.db";
//データベースファイル
vardatabase_version =
6. "1.0";

   //バージョン番号

7. vardatabase_displayname = "MySQLite"; _size = -1 ;//- 1 は無制限を意味します componentWillUnmount(){

8. if(db ){

9. }

   else {

   console.log(
"SQLiteStorage が開いていません");

10. }

    }

11. open() {

12. db = SQLiteS torage.openDatabase(

    データベース名, E データベース バージョン,

データベース表示名,
データベース サイズ,

14. () = & gt; This._successcb ('Open ');

(err)=>{

15. return db;

16. createTable( ){

17. if (!db) {

18. this.open() }

19. //ユーザーテーブルを作成します

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

21. ID INTEGER PRIMARY KEY AUTOINCREMENT,' +

22. E m'Name Varchar, '+

29. 電話 VARCHAR,' + VARCHAR)'

30. 、 ], ()=> {

    " this._errorCB(

    'executeSql', err); ,そうしないと、どこで間違いを犯すべきかわからない可能性があります。
this._successCB(
31. 'トランザクション');

32. })

33. }

    deleteData(){

34. if (!db) {

35. This.open();

db.transaction((tx)=>{

37. });

}

38. dropTable(){

db.transaction((tx)=>{
tx.executeSql(
40. 'ドロップテーブルユーザー',[] ,() => CB(

    'トランザクション',エラー);

    },()=>{
this._successCB(
43. });
    }

44. insertUserData(userData) {

45. let len = userData.length

if (!db) {
47. }

48. this.createTable(); ;len; i++){

名前 = user.name;
性別 = user.sex;

50. let phone = user.phone;  

51. let email = user.email;  

52. let qq = user.qq;  

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

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

55. tx.executeSql(sql,[名前,年齢,性別,電話番号,メールアドレス,qq],()=>{

57. },(err)=>{

58. console.log(err);

59. }

60. );  

61. }

62. },(error)=>{

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

64. ToastAndroid.show(

    "データベース插入失败",ToastAndroid.SHORT);  

65. },()=>{

66. this._successCB('トランザクション挿入データ');  

67. ToastAndroid.show(

    "成功插入 "+len+" 条用户データベース",ToastAndroid.SHORT);  

68. });  

69. }

70. close(){

71. if(db){

72. this._successCB( 「閉じる」);  

73. db.close();  

74. }

    else {

75. console.log(

    "SQLiteStorage 開いていません");  

76. }

77. db =

    null;  

78. }

79. _successCB(name){

80. console.log(

    "SQLiteStorage "+name+" success");  

81. }

82. _errorCB(name, err){

83. console.log(

    "SQLiteStorage "+name);  

84. console.log(err);  

85. }

86. render(){

87. return null;  

88. }

89. };  

'反応';

• インポートテキスト、

• ビュー、

• ナビゲーター、

• スタイルシート、

• } から

  '反応ネイティブ';
から SQLite をインポートします'./sqlite';

• クラスアプリ拡張コンポーネント{

• compennetDidUnmount(){

  sqLite.close() }

• コンポーネントWillMount (){

//データベースを開く
if(!db){

• db = sqLite.open();

• }

• //テーブルを構築

• sqLite.createTable();
/ /データの削除

• sqLite.deleteData();

• //データの一部をシミュレート

• var userData = [];
• var ユーザー = {};

• user.name = "张三";

• user.age =

  "2 8";
• ユーザー.phone =

  "18900001111";

• user.email =

• user.qq = "111222";

userData.push(ユーザー);

• //データを挿入

• sqLite.insertUserData(userData);

• db.transaction( (tx)=>{

• tx.executesql（

  "select * from user"、[]、（tx、results）=＆gt; {

varlen = results .rows.length;
• / /通常、データが見つかった後、ページを再レンダリングするために setState 操作が必要になる場合があります

alert(
• "Name: "+u.name+

  ", Age: "+ u.age+", 電話: "+u .phone);

• }

• });

console.log(エラー);

• });  

• }

• render(){

• return null;  

• }

• }

以上がReact NativeでのSqliteデータベースの利用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。