时间戳

首页 > 解决方案 > 小猫 UI 网络图库

react-native - 小猫 UI 网络图库

问题描述

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

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

标签： react-nativereact-native-ui-kitten

解决方案

看起来您已经具备此能力 :) 如果您查看资源，您应该会看到，这些RkGallery项目是RkGalleryImage。当您将项目数组传递给 时RkGallery，它会通过道具将其一一翻译到每个 RkGalleryImage 中source。这个 prop 的工作方式与普通的 react-nativeImage组件相同。所以你可以像这样使用它：

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

推荐阅读