В этом сообщении блога обсуждается влияние передачи данных изображения base64 и внутренняя работа старой архитектуры React Native.

Базовая нативная архитектура React

Этот пост предполагает некоторое знание React Native. Если вы не знакомы с ним, я бы посоветовал просмотреть официальную документацию. Вкратце, React Native — это среда JavaScript, которая упрощает написание пользовательских интерфейсов.

React Native работает с тремя потоками

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

Я сосредоточусь на JS и Native Android Thread.

Поток JavaScript и Native взаимодействует с помощью «моста». Мост — это концепция, обеспечивающая двунаправленную и асинхронную связь между этими двумя вселенными.

React Native собирает все данные согласования из JS Thread в массив JSON и передает их по мосту. Операции сериализации выполняются для упаковки сообщений в формате JSON.

Типичный размер изображения может варьироваться от КБ до МБ. Эти необработанные данные передаются в виде строки base64 компоненту React-Native Image. Поток Javascript создает буфер массива, содержащий инструкции для создания ImageView, стилей и строковых данных изображения base64.

Эти данные сериализуются в массив JSON, также известный как строка, передаются через мост и принимаются на стороне Android.
Снова десериализовали их на нативной стороне. Это не будет приятным опытом пользовательского интерфейса.

ImageView: анализ влияния передачи строки base64 в компонент изображения React-Natives

Нативные разработчики будут знакомы с Bitmap.

android.graphics предоставляет низкоуровневые графические инструменты, которые позволяют напрямую рисовать на экране.

Класс Bitmap определен в файле android.graphics.

Ресурсы изображения отображения класса ImageView. В нашем случае ресурс Bitmap.

Строка Base64 снова декодируется в объект Bitmap, а затем используется ImageView для отображения изображений.

Декодирование base64 в растровое изображение и загрузка их в поток пользовательского интерфейса может снизить производительность приложения, вызывая медленную реакцию.

Сценарии со строкой изображения base64.
Получение необработанных данных изображения из корзины S3, настроенной без CDN.
Передача изображения из одного приложения в другое

Оставайтесь с нами для части 2: JSI спешит на помощь

Я реализую собственный модуль, используя JSI для обработки необработанных изображений.