RN 图像大小调整模式：'contain'奇怪的行为

Question

我想像这样连续获得带有图片和标题的标题：期望的结果

使用此代码：

<View style={{ flex: 1, backgroundColor:'#ccf6c0', flexDirection:'column',}}>
      {/* ======================= HEADER ===================================*/}
      <View style={{flex: 0, flexDirection: 'row', backgroundColor:'#d5d5f7'}}>
         <Image
           source={require('./images/logo.png')}
           style={{resizeMode: 'contain', flex: 1}}
         />
         <View style={{flex: 1, justifyContent: 'center', backgroundColor:'#f7d5d5'}}>
           <Text style={{fontSize: 17, fontWeight:'bold', marginLeft: 7}}>
             Title
           </Text>
         </View>
       </View>
</View>

但是我得到这个输出：错误的结果- 图像上方和下方有不必要的空间。

我在这里缺少什么来获得想要的结果？

我的猜测：图像的原始大小为 360x180（所以默认情况下应该是 768 模拟器屏幕的一半宽度），但 Android 接受它作为 mdpi 图像并升级到 xhdpi（双向 x2），然后使用这个放大的图像来计算容器高度。只有然后调整大小模式："包含"适用（在新的双高容器内）。有什么建议吗？

Answer 1

这可能看起来像一个损坏的 api，但这就是我在我的案例中解决它的方式：

<Image source={require('./images/logo.png')} 
       resizeMode='contain' 
       style={{flex:1, width: null, height: null}}/>

宽度和高度看起来很奇怪null但通过这种方式，您可以摆脱静态大小并调整视图的大小。

Answer 2

在这种情况下，

唯一有效的解决方案是直接使用尺寸，以便在调整图像大小之前计算和硬设置图像帧的大小：

...
import Image, Dimensions, StyleSheet from 'react-native';
...
const height = Dimensions.get('window').height;
...
const styles = StyleSheet.create({
  imageBox: {
    flex: 1,
    resizeMode: 'contain',
    width: width/2.12,
    height: width/4.24,
  },
  })
...
<Image
   source={require('./images/image.png')}
   style={styles.imageBox}
/>

Answer 3

您可以从Image组件中删除样式并在其周围添加视图。然后将该视图与 Image 组件中的 resizeMode='contain' 道具一起使用，以确定图像的大小。

例如：

 <View style={{  height: 200, width: 200, justifyContent: 'center';}}>
     <Image image={source} resizeMode="contain" />
 </View>