React Native file access api: blob.data is 'undefined' on android



React native现在支持blob https://github.com/facebook/react-native/releases/tag/v0.54.0

我不能让他们在安卓上工作。

axios({
method: 'GET',
url: imageUrl,
responseType: 'blob'
}, (res) => {
callback(URL.createObjectURL(res.data));
);
});

这就是我创建 blob 的方式。将响应类型设置为"blob",然后使用 blob api https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL 中的 URL.createObjectURL 创建指向 blob 的 URI。接下来,图像组件指向 blob uri 以显示图像,而无需跨越 RN 桥/消息队列。

这在IOS上完美运行,但在Android上我收到以下错误:

Cannot read property 'blobId' of undefined

逐步浏览 RN 代码,我发现它位于 URL 的第 60 行.js

return `${BLOB_URL_PREFIX}${blob.data.blobId}?offset=${
blob.data.offset
}&size=${blob.size}`;

这是对 blob.data.blobId 的访问。在IOS中,这是在Android中定义的,它是未定义的。在安卓上,blob 只有两个属性:

size:24671
type:"image/jpeg"

我已经将提供程序添加到我的 AndroidManifest 中.xml

<provider
android:name="com.facebook.react.modules.blob.BlobProvider"
android:authorities="@string/blob_provider_authority"
android:exported="false"
/>

并适当地定义了字符串blob_provider_authority。

我不想使用 https://github.com/joltup/rn-fetch-blob 因为它可能会导致与 react-native 的 ^0.54 版本冲突,因为它们实现了类似的功能。我还预计 rn-fetch-blob 将停止维护,因为这将成为核心反应本机功能。

我已经尝试过的其他事情:

  • 删除设备上的应用程序,从头开始重建项目。
  • 将响应类型更改为"图像/png"(这实际上禁用了 blob(
  • 检查 res.data 实际上是 blob 对象

环境(反应原生信息(:

OS: macOS High Sierra 10.13.4
Node: 10.5.0
Yarn: 1.7.0
npm: 6.1.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4819257
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

这里可能有一些线索:https://github.com/facebook/react-native/blob/5c2720b089dd0fb277771b0ac8b0e7788c493e5d/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobModule.java

有没有人发现同样的问题并知道如何解决它?

或者也许有人有能力阅读实现以寻找线索?

我自己通过使用 https://github.com/joltup/rn-fetch-blob 而不是反应本机blob来解决这个问题。React 本机 blob 似乎还没有准备好,到目前为止 rn-fetch-blob 可以工作并且是可靠的。

最新更新