【稀饭】react native 实战系列教程之数据存储

概述

在开发一款APP，对于数据的存储是在正常不过了，在此之前，【稀饭】这个应用还没有用到存储数据的地方，为了学习研究React Native的数据存储，打算给应用增加【我的收藏】和【观看历史】这两个功能。接下来，我们来看看如何实现。

关于React Native数据存储的解决方案

关于RN如何存储数据，有两种方案。
- AsyncStorage
- SQLite

第一种是官网提供的一种数据存储方案，它是一个简单的、异步的、持久化的Key-Value文件存储系统，它对于App来说是全局性的。如果你是个android的开发者，那么这就是类似于SharedPreferences，它适用于存储些系统设置、全局变量等简单的key-value数据，不适用于value过于庞大的数据，也不适用于一些包含数据结构等复杂数据；那么针对这种不足，我们需要借助SQLite，轻量的数据库，但RN并没有提供，如果你看完了之前的自定义模块 ，那么你也可以利用原生的SQLiteDatabase开发自己的一个数据库。显然，这种需求很普遍，网上肯定有很多现有的轮子，我们就可以直接拿来用了。这里推荐使用 react-native-sqlite-storage。

实现我的收藏功能

从上面的效果图来看，我们需要在详情页面增加一个收藏按钮，点击之后，空心图变实心图，然后在收藏列表里增加一条数据。要实现这个功能，需要在点击收藏之后，将需要的信息保存到数据库中，然后在列表页读取出来显示。这里利用react-native-sqlite-storage这个第三方库来实现数据的存储。

引入 react-native-sqlite-storage

安装

根据github上的文档说明（Android部分），首先我们在项目根目录下执行cmd命令：

npm install --save react-native-sqlite-storage

如果命令执行很久没有反应，建议换个npm镜像（淘宝镜像）

配置

修改android项目的settings.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')

修改app\build.gradle

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

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

修改MainApplication.java，添加SQLitePluginPackage

public class MainApplication extends Application implements ReactApplication {
   

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

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

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

到这里算是做好了前期的配置工作，下面结合实际需求讲述如何使用它。

接口封装

首先，我们需要封装一个SQLite模块，方便应用调用。

在项目根目录js下新建db文件夹，然后在js/db/下新建SQLite.js

import React from 'react';
import SQLiteStorage from 'react-native-sqlite-storage';

SQLiteStorage.DEBUG(true);
const SQLite = React.createClass({
    render (){
        return null;
    },
});
module.exports &