React-Native: загрузите Remote Image на локальный компьютер и используйте статический URL - PullRequest
Новая
       7

React-Native: загрузите Remote Image на локальный компьютер и используйте статический URL

0 голосов
/ 25 июня 2018

Я разрабатываю приложение для Android с использованием React-Native, которое использует пакет response-native-maps .

В Marker Component (response-native-maps) естьэто опора называется "изображение", которое может использоваться только с локальными изображениями.но в моем случае мне нужно визуализировать удаленное изображение Url 

<Marker
  coordinate={marker.latlng}
  image={require('../images/pin.png')}
/>

Приведенный выше код работает нормально, так как изображение статично, но мне нужно визуализировать удаленное изображение вместо pin.jpg Так есть ли способ, которым яможет сделать такпытаюсь достичь - код, подобный приведенному ниже 

let path_to_save_image = '../images/'
some_package.fetch('http://www.example.com/image/new_image.png', 
    path_to_save_image, {
    //some headers ..
    })
    .then((res) => {
    console.log('The file saved ')
    })


render (){
  return (
    <Marker
     coordinate={marker.latlng}
    image={require('../images/new_image.png')}
    />)
}

Есть ли способ, которым я мог бы сделать это?

Я пытался создать собственный маркер, но он не работает. # вопрос

1 Ответ

0 голосов
/ 25 июня 2018

Вы можете использовать response-native-fs и path, как показано ниже, импортировать RNFS из'act-native-fs '; 

module.exports = {
  getFileName(name: string) {
    const FILE = Platform.OS === 'ios' ? '' : 'file://' ;
    return FILE + RNFS.DocumentDirectoryPath + '/' + name + '.png';
  },

  downloadAndGetImageUrl(name: string, source_url: string) {
    let fileName = this.getFileName(name);
    return RNFS.exists(fileName)
     .then(response => {
       if(response) {
         return {uri: fileName}
       }else {
         let destination_path = '/' + name + '.jpg';
         return RNFS.downloadFile({
           fromUrl: source_url,
           toFile: RNFS.DocumentDirectoryPath + destination_path
         }).promise.then(response => {
            return {uri: fileName}
         }).catch((error) => {
           return {uri:source_url}
        });
      }
    })
    .catch((error) => {
      return {uri: source_url}
    })
 },
}
...