小猫 UI 网络画廊

Question

我是 C# 的新手但不错的程序员。然而我正在努力学习 React 世界。我觉得不错。我正在尝试使用 react-native-ui-kitten 插件的 RkGallery 组件。

简单用法示例：

<RkGallery items={[
  require('path/to/my-awesome-pic-0.jpg'),
  require('path/to/my-awesome-pic-1.jpg'),
]} />

那么问题来了。我试图在这个组件上实现简单的网络图像。喜欢

<RkGallery items={[
  "uri:imageURL1",
  "uri:imageURL2",
]} />

也不

<RkGallery items={[
  <Image style={{width: 150, height: 150}} source={{uri: imgURL1}} />,
  <Image style={{width: 150, height: 150}} source={{uri: imgURL2}} />,
]} />

但是我无法实现它。任何人都可以帮助我吗？

Answer 1

看来你已经具备了这个能力:) 如果您查看来源，您应该会看到 RkGallery 项是 RkGalleryImage。当您将项目数组传递给 RkGallery 时，它会通过 source 属性将其逐一转换为每个 RkGalleryImage。该道具的工作方式与普通 react-native Image 组件的工作方式相同。所以你可以这样使用它：

<RkGallery items={[
  {uri: 'https://path-to/my-awesome-pic-0.jpg'},
  {uri: 'https://path-to/my-awesome-pic-0.jpg'},
]} />

小猫 UI 网络画廊

Kitten UI Network Gallery

react-native

react-native-ui-kitten