javascript - React Native 使长图像适合屏幕宽度并滚动

Question

我在拟合比例类似于 this 的图像时遇到了一些问题.当我使用 Dimensions 设置宽度/高度时，图像的高度适合屏幕，因此它真的被缩小了。但是，如果我不设置高度，则图像根本不会显示。我想要做的是将图像设置为适合屏幕宽度，并能够垂直滚动以查看图像的其余部分。

我尝试过 resizeModes 和 ScrollView，但似乎无法弄清楚。我正在使用 react-native-image-zoom-viewer它为比例更好的其他图像提供了简单的支持(like this)并且缩放/滚动效果很好。我只是在处理这些长图像比例时遇到了一些麻烦。

使用上面的 NPM 包，代码如下所示:

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

如何在 ScrollView 中调整您的图像，并将 width 100% height 100% 和 resizeMode "contain"应用于您的图像？

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