javascript - react native 如何为图片指定多个uri？

Question

这documentation说:

This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments.

谁能告诉我如何在 react-native 中为图像组件指定多个 URI？这个定义没有这样的例子。以及如何将高度和宽度参数与 URI 一起传递为 documentation州。

Answer 1

您可以在 react-native 源代码中找到答案，特别是 /node_modules/react-native/Libraries/Image 和文件 ImageSourcePropType 和 ImageProps。

根据 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,
});

并且根据 ImageProps，source 允许形状为 ImageSourcePropType 的对象、这些对象的数组或数字(对于本地 Assets ，语句 require('imgs/image1.png') 返回一个标识该 Assets 的数字)。这是代码:

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

因此 source 属性将接受与 ImageURISourcePropType 匹配的单个对象或匹配的对象数组。

所以要传递多个远程图像并指定宽度它会是这样的

<Image
  source={[
    {
      uri: 'https://image.location.com',
      width: 500,
      height: 500
    },
    {
      uri: 'https://image2.location.com',
      width: 600,
      height: 600
    },
    {
      uri: 'https://image3.location.com',
      width: 700,
      height: 700
    },
  ]}
/>