React Native 适合长图像以适应屏幕宽度和滚动

Question

我在拟合与此类似的比例图像时遇到了一些麻烦。 当我使用尺寸设置宽度/高度时，图像的高度适合屏幕，因此它变得非常缩小。 但是，如果我不设置高度，则图像根本不会显示。 我正在尝试做的是将图像设置为适合屏幕宽度并能够垂直滚动以查看图像的 rest。

我已经尝试过 resizeModes 和 ScrollView 但似乎无法弄清楚。 我正在使用react-native-image-zoom-viewer ，它为其他比例更好的图像（ 像这样）提供了简单的支持，并且缩放/滚动效果很好。 我只是对这些长图像比例有些麻烦。

使用上面的 NPM package，代码如下所示：

const { width, height } = Dimensions.get("window");
pages = [
    {
        url: "https://contently.net/wp-content/uploads/2014/10/how-long-to-read.png",
        props: { width: width, height: height},
    },
    {
        url: "https://product-image.juniqe-production.juniqe.com/media/catalog/product/seo-cache/x800/775/58/775-58-101P/Human-Heart-Flora--Fauna-Poster.jpg",
        props: { width: width, height: height},
    }
]

...

<Modal visible={true} transparent={true}>
    <ImageViewer
        imageUrls={pages}
        enableSwipeDown
        enablePreload
        enableImageZoom
        onSwipeDown={() => {
            navigation.goBack();
        }}
        loadingRender={() => (
            <View style={styles.loaderContainer}>
                <ActivityIndicator
                    size="large"
                    color={colours.text}
                />
            </View>
        )}
    />
</Modal>

Answer 1

将您的图像放入滚动视图中，然后将宽度 100% 高度 100% 和 resizeMode “包含”应用于您的图像呢？

<ScrollView style={{ flex: 1 }}>
  <Image source={url} style={{ width: '100%', height: '100%' }} resizeMode="contain" />
</ScrollView>