React Native集成SQLite

前端之家收集整理的这篇文章主要介绍了React Native集成SQLite前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目开发中设计到数据存储,考虑用到 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()
      );
    }

至此Android端的配置也完成了。


如果没用进行设置会出现如果提示

原文链接:https://www.f2er.com/react/301749.html

猜你在找的React相关文章