React Native：如何實現諸如高度：自動之類的東西，以便圖像在寬度上覆蓋視圖但不拉伸

Question

我正在嘗試將圖像添加到 React Native 的視圖中，並且我希望圖像覆蓋視圖的整個寬度，因此我在樣式中添加了width: '100%' ，但我需要以整數輸入高度要顯示的圖像。 這是我的代碼的樣子：

const SplashScreen = () => {
    return (
        <View style={styles.container}>
            <Text>Splash Screen</Text>
            <Image
                source={require('../assets/Login.png')}
                style={styles.logo}
            />
        </View>
    )
}

export default SplashScreen

const styles = StyleSheet.create({
    logo: {
        flex: 1,
        width: '100%',
        height: 300,
        resizeMode: 'contain',  
    }
}

我想使用height:auto類的東西而不是硬編碼height:300

這是比賽的樣子：

謝謝你們

編輯：對於其他想知道的人，我只是在styles.container添加了一個height:'100%'然后我可以使用flex調整圖像的高度

例子：

logo: {
        flex: 0.5,
        width: '100%',
        resizeMode: 'contain', 
        backgroundColor: 'red' 
    }

Answer 1

只需跳過為您的容器以及圖像提供“高度”。 您將擁有動態所需的高度

    logo: {
        flex: 1,
        width: '100%',
        aspectRatio:1 //If you know your aspect ratio use this or else divide your image width and height to get it..
        //height: 300, Commenting or removing this will make dynamically resize
        resizeMode: 'contain',
    }

如果您不知道您的圖片縱橫比，請在您的圖片標簽中添加此屬性style={{ aspectRatio: image.width / image.height }