使用 react-native 缩放大于屏幕分辨率的图像

Question

我正在使用 react-native-lightbox 来缩放图像。我有一个缩略图，当它被按下时，一个大于屏幕分辨率的图像被加载，以便在不损失质量的情况下进行可能的缩放。

打开灯箱时出现问题，图片被裁剪到屏幕大小，我无法将其缩放到全尺寸。

在 Android 上运行良好，所以我认为它与 Retina 屏幕有关。

对此有任何想法，或者您知道可以实现此目的的组件吗？

代码如下：

    <Lightbox
        key={images.photo_id}
        activeProps={{
            resizeMode: 'contain',
            source: { uri: images.photo_sizes.full },
            style: { flex: 1, width: null, height: null }
        }}
    >
        <Image
            source={{ uri: images.photo_sizes.thumbnail }}
            style={ flex: 1, height: 200, width: null }
            resizeMode='cover'
        />
    </Lightbox>

谢谢！

Answer 1

您可以在ios中使用scrollview来实现双指缩放，只需将图像如下所示并设置maximumZoomScale和minimumZoomScale值即可。它仅适用于 ios.

<ScrollView maximumZoomScale={5} scrollEnabled={true} minimumZoomScale={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
 <Image
  style={{height:100, width: 300}}
  source={{ uri: "https://img0.gaadicdn.com/images/car-
          images/496x206/Lamborghini/Lamborghini-Huracan/Lamborghini-
          Huracan-Performante/047.jpg" 
        }}
  />
</ScrollView>

使用 react-native 缩放大于屏幕分辨率的图像

Zoom an image bigger than screen resolution with react-native

react-native

react-native-ios