reactjs React Native中的srcset

5hcedyr0  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(180)

我正在使用react native。在那个Image组件中没有srcset。那么有没有办法在react native中使用srcset。或者我们可以创建自己的srcset?
类似于web或react:https://html.com/attributes/img-srcset/
还找到了这篇文章:https://medium.com/finimize-engineering/fetching-responsive-images-in-react-native-to-boost-performance-cd638cd0928e

lb3vh1jj

lb3vh1jj1#

响应本机,图像组件没有srcset属性。但是,您可以使用源属性实现类似的效果,该属性允许您为图像指定多个源,并让组件根据设备的屏幕密度选择最合适的源。

import { Image } from 'react-native';

const MyImage = () => {
  return (
    <Image
      source={[
        { uri: 'https://example.com/image@1x.jpg', density: 1 },
        { uri: 'https://example.com/image@2x.jpg', density: 2 },
        { uri: 'https://example.com/image@3x.jpg', density: 3 },
      ]}
    />
  );
};

您还可以使用源 prop 为不同的设备大小或方向提供不同的图像,如下所示

import { Image, Dimensions } from 'react-native';

const MyImage = () => {
  const { width, height } = Dimensions.get('window');
  return (
    <Image
      source={[
        { uri: 'https://example.com/image-small.jpg', width: 100, height: 100 },
        { uri: 'https://example.com/image-large.jpg', width: 200, height: 200 },
      ]}
    />
  );
};

相关问题