React Native：如何使用放大FlatList组件来实现图像的轮播？

Question

我使用FlatList组件用于图像网格，因为它具有良好的性能：

<FlatList
  data={photos}

  columnWrapperStyle={styles.listColumn}
  numColumns={4}

  renderItem={photo => this.renderPhoto(photo)}
/>

现在renderPhoto func返回一个新的FastImage组件（我使用它，因为它有一个很酷的缓存功能）

<FastImage
  resizeMode={FastImage.resizeMode.cover}
  source={{uri: photo.src}}
/>

最后我有这样的事情：

但现在我想要一个非常熟悉的可能性。点击图像将启动动画，之后图像将被拉伸到屏幕的整个宽度。

之后，用户可以执行以下操作：

• 向左/向右滑动可查看来自FlatList的上一张/下一张图片
• 缩放当前图像
• 点按图片以显示/隐藏控制元素（页脚和标题）
• 向上/向下滑动以关闭旋转木马并返回网格组件

它可能看起来像这样：

那么，问题是什么？

所有现有的轮播解决方案都是图像采集的包装。但是我不能在FlatList中传递包装器组件。

我找不到用于解决这种常见问题的现成组件。有一些我试图结合（Lightbox，Carousel）。但这种解决方案将极大地影响性能。 （我需要将FlatList中的整个图像集合加载到轮播组件中）此外，此类解决方案通常会出现动画问题。

所以我想知道这种流行的图像视图机制是否真的没有react-native解决方案？

也许值得在swift / objc（带旋转木马模态的图像的FlatList）上制作原生模块？

Answer 1

实际上你可以使用你拥有的元素。

首先你有旋转木马（react-native-loop-carousel）：

const activeProps = {
  resizeMode: 'contain',
  flex: 1,
  width: null
};

const { height, width } = Dimensions.get('window');

const renderCarousel = (album, currentPage) => (
  <Carousel style={{ width, height }} currentPage={currentPage} autoplay={false}>
    {album.map(image => (
      <FastImage
        style={{ flex: 1 }}
        resizeMode={FastImage.resizeMode.contain}
        source={{ uri: image.uri }}
        key={image.uri}
      />))
    }
  </Carousel>
);

然后FastImage（react-native-fast-image）与灯箱（react-native-lightbox）：

  LightImage = (props) => {
    const currentPage = this.items.findIndex(x => x.uri === props.source.uri);
    return (
      <Lightbox
        activeProps={activeProps}
        renderContent={() => renderCarousel(this.items, currentPage)}
      >
        <FastImage {...props} />
      </Lightbox>
    );
  }

现在，您可以将renderItem与FastImage和Lightbox的组件一起使用

<FlatList
  data={this.items}

  columnWrapperStyle={styles.listColumn}
  numColumns={4}

  renderItem={photo => this.LightImage(photo)}
/>

我复制了部分代码，因此只能复制和粘贴。如果您有任何疑问，请随时提出！这种实现只有一个问题，如果你旋转设备，布局就会中断