Как визуализировать изображение только один раз
У меня есть массив изображений:
[
{
'base64': ...
}
...
]
И я визуализирую эти изображения с помощью:
<Image
source = {{
uri: 'data:' + image.mime + ';base64,' + image.base64
}}
/>
Проблема в том, что на рендеринг уходит много времени, и каждый раз, когда я выхожу и возвращаюсь к экрану, React повторно визуализирует все изображения. Я пробовал FastImage, но это не помогает, поэтому я думаю о рендеринге этих изображений только один раз при запуске приложения и скрытии / отображении их в зависимости от текущего экрана.
Ответы 1
Обработка Base64 занимает много времени, вместо этого используйте файл изображения с расширением .jpg или .png.
Под стандартными изображениями, я думаю, вы подразумеваете хранение изображений в проекте React-native и их рендеринг. В этом случае вы можете использовать тег <Image> следующим образом:
<Image source = {require("./ImageName.png")}/>
Если вы хотите перейти на один уровень выше из файла .js, над которым вы работаете, используйте ./. Если вы хотите перейти на два уровня выше, используйте ../ в теге <Image>.
Надеюсь это поможет. Если есть сомнения, сделайте комментарий!
Но я хочу хранить изображения внутри своего приложения :(
Я отредактировал свой ответ @NewBieBR, проверьте, подходит ли он вашему вопросу.
Изображение Base64 нужно будет анализировать и повторно отображать каждый раз, когда вы загружаете страницу.