调整大小模式'contain'在反应本机中不起作用

Question

我有一个标志，我想把在屏幕的中间，但在定义了标志的尺寸后，它似乎做resizeMode='contains'不像它应该的行为。

如果我使用resizeMode='contain'，我的屏幕显示的图像超出了页面。我可以用resizeMode='center'让它像这样出现在中间，但我想知道为什么包含似乎不起作用。我试过调整徽标尺寸的宽度和高度，但我一直得到相同的结果。

我在Android上使用Expo Go来显示屏幕，和React Native v0.68.2。

我代码:

import {View, Text, Image, StyleSheet, useWindowDimensions} from 'react-native';
import Logo from '../../../assets/images/logo.png';
import CustomInput from "../../components/CustomInput";
const SignInScreen = () => {
const {height} = useWindowDimensions();

return (
<View style={styles.root}>
<Image 
source={Logo} 
styles={[styles.logo, {height: height * 0.3}]} 
resizeMode='center'
/>
<CustomInput/>
</View>
);
};
const styles = StyleSheet.create({
root: {
alignItems: 'center',
padding: 20,  
},
logo: {
width: '70%',
maxWidth: 300,
maxHeight: 100, 
},
});
export default SignInScreen;

我设法让标志没有覆盖整个屏幕。但是当我尝试像用户DhavalR建议的那样调整徽标占屏幕总高度的比例或通过用户Bhavya Koshiya建议的样式的resizeMode时，它不会影响图像的大小，只是一直保持这样。

我将代码更改为:

<Image 
source={Logo} 
style={[styles.logo, {width: height * 0.4, height: height * 0.4, resizeMode: "contain"}]}       
// resizeMode="contain"
/>

现在唯一可以在屏幕上调整徽标大小的方法是:

<Image 
source={Logo} 
style={[styles.logo, {width: 150, height: 200}]}       
resizeMode="contain"
/>

但是只有改变宽度的数字才能使logo变大/变小，而高度似乎没有任何作用。我仍然不确定为什么height: height * 0.3不工作。

Answer 1

调整模式

均匀缩放图像(保持图像的长宽比)，使图像的两个维度(宽度和高度)都等于或小于视图的相应维度(减去填充)。

你可以在这里阅读更多关于resizeMode

在你的例子中，你给高度* 0.3，它占屏幕总高度的30%。

Answer 2

考虑到你的图像没有填充，我认为这应该使它看起来像你预期的结果

将resizeMode的样式改为prop

<Image 
source={Logo} 
styles={{ width: width * 0.6, height: width * 0.6, resizeMode: 'contain' }} 
/>

const styles = StyleSheet.create({
root: {
alignItems: 'center',
justifyContent: 'center',
padding: 20,  
},
});