如何在本机反应中为图像指定多个uri？

Question

这个documentation 说：

这个 prop 还可以包含 几个远程 URL，连同它们的 width 和 height 以及可能的 scale/other URI 一起指定论据。

谁能告诉如何在 react-native 中为图像组件指定多个 URI？这个定义没有这样的例子。以及如何将 height 和 width 参数与 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 的对象、这些对象的数组或数字（对于本地资产，语句require('imgs/image1.png') 返回一个标识该资产的数字）。代码如下：

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
    },
  ]}
/>