React Native集成SQLite

最新推荐文章于 2025-12-05 21:32:14 发布

原创最新推荐文章于 2025-12-05 21:32:14 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SQlite

React Native 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何在React Native项目中配置并使用SQLite数据库。包括iOS和Android平台的具体步骤，如添加依赖、链接库及注册模块等。

项目开发中设计到数据存储，考虑用到 SQLite ，react-native-sqlite-storage 是在查阅文档中推荐使用最高的一个第三方库，故做如下配置。

一、配置 iOS

1.进入RN项目目录执行 yarn add react-native-sqlite-storage

2.然后进行link

rnpm link

rnpm 即 React Native Package Manager，是react native的专门的包管理工具。

如果还没有安装过rnpm或者link报错，可以尝试一下命令：

npm -g install rnpm xcode

通常情况经过上述两步即可完成依赖的配置工作。当然官方还提供了其他配置方法 https://github.com/andpor/react-native-sqlite-storage/blob/7afc20417eb086dcb3bab7bb26654fbbc7317e21/README.md

二、配置Android

1.进入RN项目目录执行 yarn add react-native-sqlite-storage

2.然后进入android子目录，在setting.gradle文件的include ':app'上面一行添加：

rootProject.name = 'untitled'

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

include ':app'

3.再在 app/build.gradle文件的 dependencies中添加：

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-sqlite-storage')

}

4.编辑MainApplication.Java文件，在MainActivitiy.java中注册sqlite模块

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import org.pgsqlite.SQLitePluginPackage;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new SQLitePluginPackage(),
          new MainReactPackage()
      );
    }