如何使react-native-reanimated-carousel与ImageZoom（react-native-image-pan-zoom）一起使用？

Question

我想要一个轮播，每个项目都是一个可缩放的图像，轮播应该遍布整个屏幕，所以我使用 Portal。为了支持缩放，我使用来自

ImageZoom

的

react-native-image-pan-zoom

组件，轮播来自

react-native-reanimated-carousel

，方式如下：

      <Portal>
        <Carousel
          loop
          windowSize={1}
          width={SCREEN_WIDTH}
          height={SCREEN_HEIGHT}
          data={images}
          style={{
            flex: 1,
            backgroundColor: "black",
          }}
          defaultIndex={imageIndexToDisplay}
          onSnapToItem={handleImageChange}
          renderItem={({ item: { url, width, height } }) => (
            <ImageZoom
              cropWidth={SCREEN_WIDTH}
              cropHeight={SCREEN_HEIGHT}
              imageWidth={width}
              imageHeight={height}
              enableSwipeDown
              onSwipeDown={handleClose}
              onClick={handlePress}
              useNativeDriver
            >
              <Image
                imageSource={url}
                defaultImage={defaultImage}
                imageStyle={{ height, width }}
              />
            </ImageZoom>
          )}
        />
      </Portal>

发生的情况是，

carousel

几乎不让我向左或向右滚动，因为看起来

ImageZoom

首先响应滚动。我尝试在

onStartShouldSetPanResponder={() => false}

上设置

ImageView

，这解决了

Carousel

滚动问题，但不允许我使用

ImageZoom

进行缩放，因为看起来

Carousel

现在首先响应手势。

我想知道是否有什么方法可以让他们一起工作。

先谢谢了！

Answer 1

我设法通过将此拉取请求的内容复制到我的代码库来实现此目的https://github.com/intergacticspacehighway/react-native-reanimated-zoom/pull/19然后使用它：

import Carousel from 'react-native-reanimated-carousel';
import {Zoom, createReanimatedCarouselZoomComponent} from './zoom';

const WrappedCarousel = createReanimatedCarouselZoomComponent(Carousel);
...
const renderItem = () => <Zoom><Image ... /></Zoom>;
...

但是我在 iOS 模拟器上遇到了一些崩溃，所以我必须在真实设备上进行测试。