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

【问题标题】：React Native fit long images to screen width and scrollReact Native 适合长图像以适应屏幕宽度和滚动
【发布时间】：2021-01-11 00:53:43
【问题描述】：

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

我已经尝试过 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>

【问题讨论】：

标签： javascript css react-native npm

【解决方案1】：

如何在滚动视图中调整您的图像，并将宽度 100% 高度 100% 和 resizeMode “包含”应用于您的图像？

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

【讨论】：

不幸的是，这不起作用。我以前尝试过。图像仍然按高度而不是按宽度适合屏幕：/