Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

A propper way to load images

Abierto
  • ¿Algo no está bien?
#335 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
objective-c, react-native
Área
mobile, performance

Línea de trabajo

Comienza revisando la integración de image-loader de React Native y el ejemplo proporcionado de EnrichedImageLoader, incluidos sus caminos para los recursos locales y el manejo de headers. Determina cómo deben integrarse los loaders de iOS y Android; el trabajo estará terminado cuando las solicitudes repetidas para la misma URL de imagen se dedupliquen sin romper los recursos locales ni los headers de las solicitudes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Problem

Currently, if we have multiple images with the same URL, we will fire multiple requests for them. It's okay when we have different small images. But if someone, for some reason, inserts a lot of full hd images with the same url it will take longer to download all of them separately.

Critical problems:

  1. Unnecessary CPU pressure
  2. Additional work for servers
  3. Additional network data usage.
Solution

We should implement/extend react-native's Imageloader or add our own image loader with SDWebImage for ios or GlideLoader for Android.

Here is a simple example with SDWebImageLoader that we currently use in our app:

#import "EnrichedImageLoader.h"
#import <React/RCTUtils.h>

@implementation EnrichedImageLoader
+ (instancetype)shared {
  static EnrichedImageLoader *shared;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    shared = [self new];
    shared.sdManager = [SDWebImageManager sharedManager];
  });
  return shared;
}

- (void)loadImage:(NSURL *)url completion:(void (^)(UIImage *))completion {
  if (!url) {
    completion(nil);
    return;
  }

  if (RCTIsLocalAssetURL(url)) {
    completion(RCTImageFromLocalAssetURL(url));
    return;
  }

  [self.sdManager
      loadImageWithURL:url
               options:SDWebImageHighPriority
              progress:nil
             completed:^(UIImage *_Nullable image, NSData *_Nullable data,
                         NSError *_Nullable error, SDImageCacheType cacheType,
                         BOOL finished, NSURL *_Nullable imageURL) {
               completion(image);
             }];
}

- (void)loadImage:(NSURL *)url
          headers:(NSDictionary<NSString *, NSString *> *)headers
       completion:(void (^)(UIImage *image))completion {
  if (!url) {
    completion(nil);
    return;
  }

  SDWebImageDownloaderRequestModifier *requestModifier =
      [SDWebImageDownloaderRequestModifier
          requestModifierWithBlock:^NSURLRequest *_Nullable(
              NSURLRequest *_Nonnull request) {
            NSMutableURLRequest *modifiedRequest = [request mutableCopy];
            for (NSString *key in headers) {
              [modifiedRequest setValue:headers[key] forHTTPHeaderField:key];
            }
            return modifiedRequest;
          }];

  SDWebImageContext *context =
      @{SDWebImageContextDownloadRequestModifier : requestModifier};

  [self.sdManager
      loadImageWithURL:url
               options:SDWebImageHighPriority
               context:context
              progress:nil
             completed:^(UIImage *_Nullable image, NSData *_Nullable data,
                         NSError *_Nullable error, SDImageCacheType cacheType,
                         BOOL finished, NSURL *_Nullable imageURL) {
               completion(image);
             }];
}

@end
Lenguaje dominante
C
Estrellas
1.4k
Forks
67
Merge medio
4 d 11 h
PR fusionados (30 d)
7

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de software-mansion/react-native-enriched-html

Todos los issues de software-mansion/react-native-enriched-html

Issues similares

Más issues de C

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.