0

我的 React Native 应用程序中存在以下问题。该应用程序将一些 PDF 文件存储为文件，并且能够访问它们。然后可能在重新编译后，应用程序开始在访问这些文件时出现问题。但是，这些文件仍然存在。我下载了应用程序的完整数据容器进行检查。

应用的数据容器

我怀疑这是因为应用程序的数据容器 URI 的动态部分在重新编译后总是更改，然后是实际路径？例如D22506C1-9364-43A4-B3C7-F9FFF0E1CC48，6BDC3F93-6BC3-4BB6-BD3F-9BFA7E4A4627

如果是这样，将 URI 存储在 React Native 中的数据库中以便再次检索它们的最佳实践是什么？

以下 6 个 PDF 文件：

ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/dk79lqddh3mlkcstqel9.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/e1exw1qg4cs6czktrfkfvi.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/zfy6hp3zf42me5ru32jfa.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/fum4qf23mwnzcmye39xau.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/btksznt1lxv7k4ey23bw93.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/6BDC3F93-6BC3-4BB6-BD3F-9BFA7E4A4627/Documents/Reports/smpkiggii4v7xmfhpnmdi.pdf

无法在应用程序的不同位置加载这些 URI：

示例 1

<Pdf style={styles.image} source={{ uri: 'file://' + this.props.pdf }} />

示例 2

FileService.readFileFromStorage('file://' + this.report.report_uri, 'base64')    

static readFileFromStorage(path, encoding) {
    return new Promise((resolve, reject) => {
        RNFS.readFile(path, encoding)
            .then((file) => {
                resolve(file);
            })
            .catch((err) => {
                console.log('Error: unable to read file', path, err.message);
                reject(err)
            });
    })

}

这用于写入文件：

FileService.writeFiletoStorage(r.taskId, 'pdf', base64Str)

static writeFiletoStorage(fileName, extention, base64Str) {
    return new Promise((resolve, reject) => {
        RNFS.mkdir(RNFS.DocumentDirectoryPath + '/Reports')
        var path = RNFS.DocumentDirectoryPath + '/Reports/' + fileName + '.' + extention;

        return RNFS.writeFile(path, base64Str, 'base64')
            .then((success) => {
                console.log('FILE WRITTEN!', path, success);
                resolve(path);
            })
            .catch((err) => {
                console.log('Error: unable to write file to storage', path, err.message);
                reject(err)
            });
    })

}
4

1 回答 1

1

写入文件的方法是返回完整路径，该路径因不同的编译而异。仅返回相对路径效果更好：

static writeFiletoStorage(fileName, extension, base64Str) {
        return new Promise((resolve, reject) => {
            RNFS.mkdir(RNFS.DocumentDirectoryPath + 'Reports')
            let path = '/Reports/' + fileName + '.' + extension;
            let fullPath = RNFS.DocumentDirectoryPath + path;

            return RNFS.writeFile(fullPath, base64Str, 'base64')
                .then((success) => {
                    console.log('FILE WRITTEN!', fullPath, success);
                    resolve(path);
                })
                .catch((err) => {
                    console.log('Error: unable to write file to storage', fullPath, err.message);
                    reject(err)
                });
        })

    }

必须对读取文件的方法进行相同的更改：

static readFileFromStorage(path, encoding) {
    return new Promise((resolve, reject) => {
        let fullPath = RNFS.DocumentDirectoryPath + path;
        RNFS.readFile(fullPath, encoding)
            .then((file) => {
                resolve(file);
            })
            .catch((err) => {
                console.log('Error: unable to read file', fullPath, err.message);
                reject(err)
            });
    })

}
于 2019-09-05T08:30:50.730 回答