Да, я не осознавал, что это было ограничением выставки :-(

я трудности с пониманиемImage prefetch, вДок нет особых объяснений по этому поводу:

«Предварительная загрузка удаленного образа для последующего использования путем загрузки его в кэш диска»

Не могли бы вы помочь мне понять следующее о предварительной загрузке изображений:

Предположим, пользователь загружает изображение профиля, а его URL-адрес хранится в AsyncStorage.

Должен ли я бежатьImage.prefetch(UserStore.profileImageUrl) только один раз после успешной загрузки, И использовать предварительно выбранные изображения в компонентах, как правило, как<Imagesource={{uri: UserStore.profileImageUrl}}/>

Или я должен всегда бежатьImage.prefetch(UserStore.profileImageUrl) перед использованием этого изображения в компоненте, затем только запустить<Imagesource={{uri: UserStore.profileImageUrl}}/>

Предположим, позже пользователь изменяет свое изображение профиля, загружая новое изображение, и после успешной загрузки я предварительно выберу новое изображение. Будет ли ранее кэшированный образ все еще существовать на диске?

Если да, не займет ли оно много места в устройстве, если есть много предварительно выбранных изображений?Есть ли способ вручную удалить предварительно извлеченное изображение с диска?

Учитывая вышеперечисленные вопросы, если есть альтернативные решения для достижения кэширования изображений при использовании реакции native с expo, не могли бы вы помочь мне с этим.

 manbearshark21 сент. 2017 г., 22:49
Я имел в виду ссылку на указанный проект:github.com/wcandillon/react-native-img-cache
 Robin23 сент. 2017 г., 15:29
@ikrtolica К сожалению, я использую выставку для своего приложения. Спасибо за ваше предложение.
 manbearshark21 сент. 2017 г., 22:30
Документы для Image prefetch очень непрозрачны, и его поведение немного сложно понять. Вам не предоставляется большой контроль над жизненным циклом ваших кэшированных изображений. Например, вы не можете вручную очистить кеш. Я нашел это разочарование и закончил тем, что использовал превосходный проект Reaction-native-Image-cache в нескольких проектах, над которыми я работал, с хорошими результатами. Обратите внимание, что этот проект не будет работать для вас, если вы используете что-то вроде Expo (для него требуются собственные расширения).

Ответы на вопрос(2)

ьзовании реакции native с expo, не могли бы вы мне помочь с этим.

Возможно, вас заинтересует мой модуль компонента более высокого порядка, который добавляет кеширование изображения, связанное с производительностью, и функцию «постоянного кеширования» в собственный компонент <Image>.

React Native Image Cache HOC

Tl; Пример кода DR:

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
      </View>
  );
  }
}

Первое изображение будет кэшироваться до тех пор, пока общий локальный кэш не станет больше 15 МБ (по умолчанию), затем кэшированные изображения будут удалены первыми, пока общий кэш не станет ниже 15 МБ.

Второе изображение будет храниться на локальном диске постоянно. Люди используют это в качестве замены для отправки статических файлов изображений с вашим приложением.

Лично я не стал бы слишком усложнять вещи, перезаписывая файлы снова и снова при изменении файла, это просто требует большой головной боли. Вместо этого я бы создал уникальное имя файла для каждой загрузки. Таким образом, в профиле пользователя в первый раз при загрузке отображается «profile-uniqueIdHere.jpg», а когда они меняют свой профиль, вы просто создаете новый файл «profile-anotherUniqueIdHere.jpg» и обновляете его пользовательские данные, чтобы отразить новое местоположение файла. Для получения помощи по созданию уникальных идентификаторов посмотрите нареагируют родной-UUID.

 billmalarky31 янв. 2018 г., 21:12
Да, я не осознавал, что это было ограничением выставки :-(
 pejalo11 янв. 2018 г., 08:18
выглядит отлично, но это зависит отreact-native link это означает, что вы должны извлечь свое приложение из Экспо, чтобы использовать его :(
Решение Вопроса

с которым я имел дело некоторое время, и я узнал несколько вещей оImage.prefetch:

В текущемReact-Native версия (0.48), этот метод еще не завершен. Чтобы быть более точным:

реализация ios все еще не завершена.Там нет полного руководства по этому вопросу.Нет никакого способа очистить кеш (вы можете проверить, кэшируется ли URL, однако, насколько я знаю, вы не можете очистить его сейчас).

В результате я не предлагаю вам использовать его. Независимо от того, если вы хотите знать, как работает API, это как:

Цель

Я думаю, цель совершенно очевидна, это API:

Предварительная загрузка удаленного образа для последующего использования путем загрузки его в кэш диска

Это означает, что вы можете использоватьImage.prefetch(url) в вашейconstructor или жеcomponentWillMount, Он пытается извлечь изображение асинхронно, затем визуализировать вашу страницу с помощью своего рода ActivityIndicator. Наконец, когда изображение получено успешно, вы можете повторно визуализировать ваш компонент.

Image.prefetch(url) на самом деле сохраняет изображение на диск (не в память), в результате, когда или где вы пытаетесь использовать

<Image source={{uri:url}}/>

Во-первых, он проверяет список URL-адресов кэшей, если вы предварительно выбрали этот URL-адрес ранее (и он находится на диске), он не потрудится повторно извлечь (если вы не запустите функцию `Image.prefetch (url) 'снова (Я не уверен, работает ли он правильно).

Последствия этого вопроса настолько сложны. Это означает, что если вы предварительно выбираете изображение внутри одного компонента (например,<Component1/>), когда вы пытаетесь показать это конкретное изображение в другом компоненте (например,<Component12>), Он не будет загружать образ и просто использует кэш диска.

Следовательно, либо не используйте этот Image.prefetch вообще (пока не появится полный API, с контролем кэша), либо используйте его на свой страх и риск.

на Android

На Android у вас есть 3 API для предварительной выборки, и только один из них представлен в документации:

упреждающий:

var response = Image.prefetch(imageUrl,callbackFunction)

Image.prefetch может иметь необязательный второй аргументcallbackFunction, которая запускает функциюДо получение изображения. Это может быть написано в следующем формате:

    var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))

Стоит отметить, чтоcallbackFunction может иметь аргумент под названиемrequestId(с указанием количества предварительных выборок среди всех других предварительных выборок), которые затем можно использовать для отмены выборки.

    var response = Image.prefetch(imageUrl,(id)=>console.log(id))

Кроме того,response это обещание, вы можете использовать.then сделать больше после того, как изображение предварительно извлечено.

abortPrefetch

 Image.abortPrefetch(requestId) ;

используется для отмены ожидающей предварительной выборки. Аргумент requestId, используемый в качестве аргумента, такой же, как и в prefetch.

queryCache

  Image.queryCache([url1,url2, ...])
    .then((data)=>console.log(data));

Используется для проверки того, что определенный URL-адрес уже кэширован, и если да, то где он кэшируется (диск или память)

на IOS

Я думаю, что толькоImage.prefetch(url) в настоящее время доступен на IOS, и нет функции обратного вызова, которая будет вызываться в качестве второго аргумента.

 Robin01 окт. 2017 г., 07:18
Спасибо за очень хорошее объяснение. Не могли бы вы предложить хорошее кэширование изображений при использовании с expo?
 Lance09 окт. 2017 г., 10:43
Если вы хотите сохранить изображения и всегда иметь их в автономном режиме, посмотрите наnpmjs.com/package/react-native-preload-images.

Ваш ответ на вопрос