React Native，图片太大超出屏幕了

Question

我很茫然，我的图像很大，只是从屏幕上消失了，你看不到它。它只是一个 ScrollView，显示一本书中的一堆页面扫描件。我可以垂直滚动并查看图像的其余部分，但我无法将其包含在视图中。我使用的是 iOS，我的代码如下

import React from 'react';
import { WebView } from 'react-native-webview'
import { ScrollView, Image, View, StyleSheet, Dimensions } from 'react-native';


const StandardizationScreen = ({ navigation }) => {
    return (
        <ScrollView style={{flex: 1}} contentContainerStyle={{alignItems: "center"}}>
            <View style={{flex: 1}}><Image style={styles.image} source={require('../assets/standardization/3982243bbc574ccbad697528ff26f605-52.png')}/></View>
        </ScrollView>
    )
}

const win = Dimensions.get('window');

const styles = StyleSheet.create({
    image: {
        width: win.width
    }
})

export default StandardizationScreen;

Answer 1

您可以使用 resizeMode = 'contain'

const styles = StyleSheet.create({
    image: {
        width: win.width,
        resizeMode:'contain'
    }
})

Answer 2

将

resizeMode="contain"

设置为

Image

即可，如下所示。并在 doc 上找到更多信息。

<Image 
  style={styles.image} 
  resizeMode="contain" 
  source= {require('../assets/standardization/3982243bbc574ccbad697528ff26f605-52.png')}
/>