[译]React Native 开源 SQLite 数据库组件 (react-native-sqlite-storage)

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(www.lcode.org)

翻译计划项目:github.com/jiangqqlmj/…

开源项目地址:github.com/andpor/reac…

项目介绍

该组件进行封装了适配于React Native Android/iOS开发的SQLite3插件组件模块。

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

特点介绍:

• Android和iOS开发度支持统一的JavaScript API接口调用
• 支持Java纯原生代码模式
• 支持SQL事务
• 通过纯JavaScript接口回调以及返回Promise对象
• 从应用程序bundle和沙盒预先导入数据库

配置安装

一.iOS版本安装方法

1.1.命令行运行安装组件:npm install --save react-native-sqlite-storage

1.2.XCode SQLite项目依赖安装

讲SQLite项目作为一个库进行依赖到当前项目，截图如下:

查看图片

1.3.XCode SQLite库依赖

讲libSQLite.a添加到Libraries and Frameworks中，同时添加sqlite3.0.tbd (XCode 7) 或者libsqlite3.0.dylib (XCode 6 and earlier)到当前的地方

查看图片

1.4.项目模块导入

在index.ios.js文件中定义var SQLite = require('react-native-sqlite-storage')进行导入模块

1.5.使用模块功能

下面是一些实例使用该功能的代码

errorCB(err) {
  console.log("SQL Error: " + err);
},

successCB() {
  console.log("SQL executed fine");
},

openCB() {
  console.log("Database OPENED");
},

var db = SQLite.openDatabase("test.db", "1.0", "Test Database", 200000, openCB, errorCB);
db.transaction((tx) => {
  tx.executeSql('SELECT * FROM Employees a, Departments b WHERE a.department = b.department_id', [], (tx, results) => {
      console.log("Query completed");

      // Get rows with Web SQL Database spec compliance.

      var len = results.rows.length;
      for (let i = 0; i < len; i++) {
        let row = results.rows.item(i);
        console.log(`Employee name: ${row.name}, Dept Name: ${row.deptName}`);
      }

      // Alternatively, you can use the non-standard raw method.

      /*
        let rows = results.rows.raw(); // shallow copy of rows Array

        rows.map(row => console.log(`Employee name: ${row.name}, Dept Name: ${row.deptName}`));
      */
    });
});

二.Android版本安装方法

2.1.命令行运行安装模块:npm install --save react-native-sqlite-storage

2.2.进行全局Gradle设置

// file: 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')

2.3.修改android/app/build.gradle文件

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':react-native-sqlite-storage')
}

2.4.在MainActivitiy.java中注册模块

...
import org.pgsqlite.SQLitePluginPackage;

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")  // this is dependant on how you name you JS files, example assumes index.android.js
                .setJSMainModuleName("index.android")        // this is dependant on how you name you JS files, example assumes index.android.js
                .addPackage(new MainReactPackage())
                .addPackage(new SQLitePluginPackage(this))   // register SQLite Plugin here
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null); //change "AwesomeProject" to name of your app
        setContentView(mReactRootView);
    }
...

如果版本从0.18开始注册模块

import org.pgsqlite.SQLitePluginPackage;

public class MainActivity extends ReactActivity {
  ......

  /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List getPackages() {
      return Arrays.asList(
        new SQLitePluginPackage(this))   // register SQLite Plugin here
        new MainReactPackage());
    }
}

2.5.使用实例代码

更多实例大家可以去clone一下当前的项目

// file: index.android.js

var React = require('react-native');
var SQLite = require('react-native-sqlite-storage')
...