image - 尝试在空对象引用上调用接口(interface)方法 java.lang.String com.facebook.react.bridge.ReadableMap 等

Question

将图像上传到 Firebase 存储后出现此错误。我在用
“ react 原生”:“0.55.4”，
"react-native-fetch-blob": "^0.10.8",
"react-native-image-picker": "^0.26.10",
“火力基地”:“^5.0.4”，

这是我上传图片的代码。

// Prepare Blob support
const Blob = RNFetchBlob.polyfill.Blob;

const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

uploadImage = (uri, imageName, mime = "image/jpg") => {
    return new Promise((resolve, reject) => {
      const uploadUri =
        Platform.OS === "ios" ? uri.replace("file://", "") : uri;
      let uploadBlob = null;
      const imageRef = db
        .storage()
        .ref("images/")
        .child(imageName);

  fs.readFile(uploadUri, "base64")
    .then(data => {
      return Blob.build(data, { type: `${mime};BASE64` });
    })
    .then(blob => {
      uploadBlob = blob;
      alert("blob is " + JSON.stringify(blob));
      return imageRef.put(blob, { contentType: mime });
    })
    .then(() => {
      uploadBlob.close();
      return imageRef.getDownloadURL();
    })
    .then(url => {
      resolve(url);
    })
    .catch(error => {
      reject(error);
    });
});};

尝试在空对象引用 readAsText FileReaderModule.java:43 调用 Method.java 调用 JavaMethodWrapper.java 上调用接口(interface)方法“java.lang.String com.facebook.react.bridge.ReadableMap.getString(java.lang.String)”: 372 调用 JavaModuleWrapper.java:160 运行 NativeRunnable.java handleCallback Handler.java:790 dispatchMessage Handler.java:99 dispatchMessage MessageQueueThreadHandler.java:29 循环 Looper.java:164 运行 MessageQueueThreadImpl.java:192 运行 Thread.java:764

Answer 1

我遇到了同样的错误。解决方案是按照官方文档的说明进行“获取替换”:

Since we are not implementing FileReader polyfill, you might run into this error in some cases.

If you're facing this problem with Blob polyfill in Debug Mode, try replace window.fetch with fetch replacement should fix it.

和:

If you have existing code that uses whatwg-fetch, now you don't have to change existing code after 0.9.0, just use fetch replacement. The difference between Official fetch and fetch replacement is that, official fetch uses WHATWG-fetch js library which wraps XMLHttpRequest polyfill under the hood, and our implementation simply wraps RNFetchBlob.fetch.

基本上，您只需将其添加到您的代码中，就在您的 window.Blob = Blob; 下方。线:

const Fetch = RNFetchBlob.polyfill.Fetch
// replace built-in fetch
window.fetch = new Fetch({
    // enable this option so that the response data conversion handled automatically
    auto : true,
    // when receiving response data, the module will match its Content-Type header
    // with strings in this array. If it contains any one of string in this array, 
    // the response body will be considered as binary data and the data will be stored
    // in file system instead of in memory.
    // By default, it only store response data to file system when Content-Type 
    // contains string `application/octet`.
    binaryContentTypes : [
        'image/',
        'video/',
        'audio/',
        'foo/',
    ]
}).build()

文档:
https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting#failed-to-execute-readastext-on-filereader