В этом сообщении блога обсуждается влияние передачи данных изображения 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 для обработки необработанных изображений.