Skip to main content

Image

Việc sử dụng Image do React Native cung cấp để giải quyết vấn đề caching hình ảnh (avatar, image attachments, URL preview,...) chưa thực sự hoàn hảo và bạn có thể thấy nhiều hình ảnh bị thiếu khi ứng dụng ở chế độ ngoại tuyến. Chúng tôi cung cấp một giải pháp thuận tiện hơn để thay thế cách sử dụng cơ bản của Image bằng cách sử dụng ImageComponent. PSChatProps nhận tham số ImageComponent để cung cấp thành phần tùy chỉnh xử lý bộ nhớ đệm và có cùng API với Image của React-Native.

Có rất nhiều thư viện có sẵn cho mục đích này:

Đoạn mã dưới đây ví dụ về cách sử dụng react-native-fast-image để xử lý việc caching hình ảnh trong cuộc trò chuyện:

import React from 'react';
import FastImage from 'react-native-fast-image';
import {PSChat, PSChatProps} from '@communi/chat-react-native';

export const App = () => {

  const chatProps = React.useMemo(() => {
    return {
     ...,
     ImageComponent: FastImage,
    } as PSChatProps;
  }, []);

  return (
    <PSChat props={chatProps}>{/** App components */}</PSChat>
  );
};

Gif & Animated WebP​

Chúng tôi giả định ứng dụng của bạn dùng thư viện react-native-fast-image để cung cấp FastImage thông qua ImageComponent ở PSChatProps.

Để tải và hiển thị ảnh động dạng Gif và Webp chúng ta cần một số cấu hình ở native như sau:

Android​

Sử dụng Glide

Sử dụng GlideWebpDecoder

Ở phiên bản react-native-fast-image v8.6.3 sử dụng Glide v4.12.0. Tuy nhiên để hưởng lợi từ những tính năng mới và các bản vá lỗi chúng ta nên cập nhật Glide lên phiên bản mới nhất.

./android/gradle.properties
glideVersion=4.16.0

iOS​

Sử dụng SDWebImage

Sử dụng SDWebImageWebPCoder

Ở phiên bản react-native-fast-image v8.6.3 sử dụng SDWebImage v5.11.1 và SDWebImageWebPCoder v0.8.4. Tuy nhiên ở các phiên bản này đều ghi nhận các vấn đề liên quan tới tải ảnh Gif nên chúng ta cần tạo .patch để cập nhật chúng.

Chúng ta sử dụng patch-package để tạo .patch. Ví dụ .patch cho react-native-fast-image v8.6.3

./patches/react-native-fast-image+8.6.3.patch
diff --git a/node_modules/react-native-fast-image/RNFastImage.podspec b/node_modules/react-native-fast-image/RNFastImage.podspec
index db0fada..6c067f2 100644
--- a/node_modules/react-native-fast-image/RNFastImage.podspec
+++ b/node_modules/react-native-fast-image/RNFastImage.podspec
@@ -16,6 +16,6 @@ Pod::Spec.new do |s|
   s.source_files  = "ios/**/*.{h,m}"
 
   s.dependency 'React-Core'
-  s.dependency 'SDWebImage', '~> 5.11.1'
-  s.dependency 'SDWebImageWebPCoder', '~> 0.8.4'
+  s.dependency 'SDWebImage', '~> 5.18.3'
+  s.dependency 'SDWebImageWebPCoder', '~> 0.14.1'
 end

Cập nhật lại Pod:

npx patch-package && rm -rf ./ios/Pods && rm -rf ./ios/Podfile.lock && npx pod-install ios

Đăng ký SDWebImageWebPCoder

AppDelegate.mm
#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  // Register WebP format support
  [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];
  
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}