Компонент React Native HO C - PullRequest
Новая
       82

Компонент React Native HO C

0 голосов
/ 19 июня 2020

Я пытаюсь создать компонент withCache Ho C, но возникают некоторые проблемы ...

Вот и все C: 

// HOC for cached images
const withCache = (Component) => {
  const Wrapped = (props) => {
    console.log(props);
    const [uri, setUri] = useState(null);

    useEffect(() => {
      (async () => {
        const { uri } = props;

        const name = shorthash.unique(uri);
        const path = `${FileSystem.cacheDirectory}${name}`;
        const image = await FileSystem.getInfoAsync(path);

        if (image.exists) {
          console.log("Read image from cache");
          setUri(image.uri);
          return;
        } else {
          console.log("Downloading image to cache");
          const newImage = await FileSystem.downloadAsync(uri, path);
          setUri(newImage.uri);
        }
      })();
    }, []);

    return <Component {...props} uri={uri} />;
  };

  Wrapped.propTypes = Component.propTypes;

  return Wrapped;
};

export default withCache;

Дело в том, что «Component "является настраиваемым компонентом изображения со специфицированными c propTypes и defaultProps.

Как использовать этот компонент? Я пробовал: 

const CachedImage = withCache(<MyCustomImage uri={"https://..."} height={100} ripple />)

...

return (<CachedImage />)

, но не работает :( Я хочу передать логическое свойство моему компоненту пользовательского изображения с именем «cached», и, если оно истинно, вернуть компонент пользовательского изображения, завернутый в HO C

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Чтобы использовать HO C, вы должны создать экземпляр вне функционального компонента, например 

const CachedImage = withCache(MyCustomImage)

, и использовать его как 

const MyComp = () => {
   ...
   return (<CachedImage  uri={"https://..."} height={100} ripple />)
}
0 голосов
/ 19 июня 2020

Окончательная реализация Ho C на случай, если кто-то сочтет это полезным в будущем. 

import React, { useState, useEffect } from "react";
import shorthash from "shorthash";
import * as FileSystem from "expo-file-system";

// HOC for cached images
const withCache = (Component) => {
  const Wrapped = (props) => {
    console.log(props);
    const [uri, setUri] = useState(null);

    useEffect(() => {
      (async () => {
        const { uri } = props;

        const name = shorthash.unique(uri);
        const path = `${FileSystem.cacheDirectory}${name}`;
        const image = await FileSystem.getInfoAsync(path);

        if (image.exists) {
          console.log("Read image from cache");
          setUri(image.uri);
          return;
        } else {
          console.log("Downloading image to cache");
          const newImage = await FileSystem.downloadAsync(uri, path);
          setUri(newImage.uri);
        }
      })();
    }, []);

    // Needs to have the final uri before render the image
    return uri && <Component {...props} uri={uri} />;
  };

  Wrapped.propTypes = Component.propTypes;

  return Wrapped;
};

export default withCache;
...