реагировать на родной CameraRollPicker загрузить изображение

Question

Я пытаюсь использовать CameraRollPicker в реагировать на родной, чтобы загрузить изображение в Firebase. В первый раз работает нормально , но при входе в Imageupload во второй раз я получаю эту ошибку:

Attempt to invoke interface method 'java.lang.String 
com.facebook.react.bridge.ReadableMap.getString(java.lang.String)' on a null 
object reference
readAsText
FileReaderModule.java:43
invoke
Method.java
invoke
JavaMethodWrapper.java:372
invoke
JavaModuleWrapper.java:160
run
NativeRunnable.java
handleCallback
Handler.java:790
dispatchMessage
Handler.java:99
dispatchMessage
MessageQueueThreadHandler.java:29
loop
Looper.java:164
run
MessageQueueThreadImpl.java:192
run
Thread.java:764

Что я пробовал:

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';
import firebase from 'firebase';
import { Actions } from 'react-native-router-flux';
import RNFetchBlob from 'react-native-fetch-blob';
import CameraRollPicker from 'react-native-camera-roll-picker';

export default class ImageUpload extends Component {


 getSelectedImages = (selectedImages, currentImage) => {

   const image = currentImage.uri;
   const Blob = RNFetchBlob.polyfill.Blob;
   const fs = RNFetchBlob.fs;
  window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
  window.Blob = Blob;


   let uploadBlob = null;
   const imageRef = firebase.storage().ref('pictures').child('test.jpg');
   let mime = 'image/jpg';
   fs.readFile(image, 'base64')
   .then((data) => {
    console.log(data);
    return Blob.build(data, { type: `${mime};BASE64` });
   }) 
   .then((blob) => {
     uploadBlob = blob;
     console.log(uploadBlob);
     console.log(blob);
     return imageRef.put(blob, { contentType: mime });
   })
   .then(() => {
     uploadBlob.close();
     return imageRef.getDownloadURL();
   })
   .then((url) => {
     // URL of the image uploaded on Firebase storage
     console.log(url);
     Actions.subjects();

   })
   .catch((error) => {
     console.log(error);

   });

}

render() {
 return (
   <View style={styles.gallery}>
<CameraRollPicker selected={[]} maximum={1} callback= 
{this.getSelectedImages} />         <Text>
       Image Gallery
     </Text>
   </View>
  );
   }
 }

 const styles = StyleSheet.create({
   container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  gallery: {
    flex: 1,
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

Как я вызываю ImageUpload из моего основного файла:

<View style={{ flex: 1, backgroundColor: '#4c7794', justifyContent: 'space-between' }}>
<ImageUpload />
  <NavBar />
</View>

Где может быть нулевая ссылка на объект? У вас есть какие-нибудь предложения? И почему это работает в первый раз?

Answer 1

Я столкнулся с той же ошибкой. Решение состоит в том, чтобы сделать «Fetch замену», как объясняется в официальной документации:

Поскольку мы не реализуем полифилл FileReader, вы можете столкнуться с эта ошибка в некоторых случаях.

Если вы столкнулись с этой проблемой при использовании полифайла Blob в режиме отладки, попробуйте замените window.fetch с заменой fetch, чтобы исправить это.

И

Если у вас есть код, использующий whatwg-fetch, то теперь у вас нет чтобы изменить существующий код после 0.9.0, просто используйте замену fetch. Разница между Официальной выборкой и заменой выборки в том, что Официальная выборка использует библиотеку WHATWG-fetch js, которая упаковывает XMLHttpRequest полифилл под капотом, а наша реализация просто заворачивает 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