Блог

Я бы хотел обернуть компонент изображения в react-native. Однако появляется сообщение об ошибке, в котором говорится, что свойство ‘uri’ не существует. Почему это происходит?

 import React from 'react';
import { Image as DefaultImage, ImageProps } from 'react-native';
import { PromiseFn, useAsync } from 'react-async';

type ImageSize = {
  width: number;
  height: number;
};

const getImageSize = (uri: string) => {
  return new Promise<ImageSize>((resolve, reject) => {
    DefaultImage.getSize(
      uri,
      (width, height) => {
        resolve({ width, height });
      },
      (error) => {
        reject(error);
      }
    );
  });
};

const promiseFn: PromiseFn<ImageSize> = async ({ uri }) =>
  await getImageSize(uri);

export function Image(props: ImageProps) {
  const { source } = props;
  const { data, error, isPending } = useAsync<ImageSize>({
    promiseFn: promiseFn,
    uri: source.uri, // Property 'uri' does not exist on type 'ImageSourcePropType'.
                     // Property 'uri' does not exist on type 'number'.ts(2339)
  });

  return (
    <DefaultImage
      style={[{ width: data?.width, height: data?.height }, props.style]}
      {...props}
    />
  );
}
  

Я попробовал другой метод, но есть еще одна ошибка.

 const isImageURISource = (
  source: ImageURISource | ImageURISource[] | ImageRequireSource
) => {
  if ('uri' in source) {
    return source; // The right-hand side of an 'in' expression must be of type 'any', an object type or a type parameter.ts(2361)
  }
};
  

Я не уверен, что это отличное решение, но именно так я решил ту же проблему.
В основном перепишите source тип.

 import {
  ImageProps as DefaultImageProps,
  ImageURISource,
} from 'react-native';

type ImageProps = DefaultImageProps amp; {
  source: ImageURISource;
};
  

Вот определение ImageSourcePropType , которое я нашел на github. Похоже ImageSourcePropType , что это может быть число или массив, и в этом случае у него не будет uri свойства.

 const ImageURISourcePropType = PropTypes.shape({
  uri: PropTypes.string,
  bundle: PropTypes.string,
  method: PropTypes.string,
  headers: PropTypes.objectOf(PropTypes.string),
  body: PropTypes.string,
  cache: PropTypes.oneOf([
    'default',
    'reload',
    'force-cache',
    'only-if-cached',
  ]),
  width: PropTypes.number,
  height: PropTypes.number,
  scale: PropTypes.number,
});

const ImageSourcePropType = PropTypes.oneOfType([
  ImageURISourcePropType,
  // Opaque type returned by require('./image.jpg')
  PropTypes.number,
  // Multiple sources
  PropTypes.arrayOf(ImageURISourcePropType),
]);