React Native 上图片等大数据的本地存储解决方案

Question

这是我的最终产品的工作流程：

当用户第一次打开应用时，获取所有数据即，包括图像 (150+) 和相关 JSON 对象。
随后打开应用程序时，应加载图像和数据从本地存储，即根本不需要互联网。

我知道这看起来很奇怪，但这是我的用例：

该产品是 Android 盒子（55 英寸触摸屏电视）上的 Wayfinder 运行，将放置在商场中。除非我手动连接它，否则它将无法访问互联网。

因此它应该在第一次打开时加载数据，即当我配置应用程序时。

我遇到的解决方案：

Realm：本地数据库管理，对 react-native 有很好的支持 - 我现在的选择

原生异步存储：不适合大数据

SQLite：对 SQL 查询不满意

我仍在寻找解决此问题的不同方法。另外，我熟悉 Redux.

谢谢。

Answer 1

如果使用 expo，请查看 react-native-fs (or expo-file-system。

专门用于在设备上存储文件。在您的组件中，它看起来像这样：

const RNFS = require('react-native-fs');

RNFS
    .downloadFile({ fromUrl: myURL, toFile: myFilePath })
    .promise
    .then(res => console.log('Done'));

Answer 2

使用 pouchDB 数据库，这是使用 indexDB 本地浏览器数据库

调用 XHR 请求图像并将响应转换为二进制数据并存储在本地数据库中

当需要预览图像时，从数据库中获取并制作一个 blobUrl 并显示在 img 标签中

    axios.get(url, {
                    progress: false, responseType: 'arraybuffer',
                    onDownloadProgress: (progressEvent) => {
                        precent = (100 * progressEvent.loaded / progressEvent.total)
                        console.log(precent)
                    }
                })
.then(resp => {

                    //get db
                    let db = $db.dbModel

                    //set attach
                    db.get(doc._id).then((doc) => {

                        db.putAttachment(doc._id, 'index.mp4', doc._rev, new Blob([new Uint8Array(resp.data)], {type: 'video/mp4'}), 'video/mp4')
                            .then(res => {
                                // console.log('success store file')
                            })
                    })

                })

https://github.com/mohammadnazari110/pwa_offline_video_download

React Native 上图片等大数据的本地存储解决方案

Local storage solutions for large data including images on React Native

react-native

redux

realm

offline