React Native如何将图片适配到固定宽高的View容器中

问题根因 #

• 你当前用的resizeMode: 'contain'是等比例缩放图片至完整显示在容器内，不会填充容器，自然无法覆盖对应色块
• 底部蓝色容器高度设置为整屏高度，加上顶部1/3屏高度的绿色容器，内容会超出屏幕可视区域，不符合布局预期
• 外层容器container设置了alignItems: 'center'和justifyContent: 'center'，会干扰子元素的布局对齐

适配方案 #

第一步：修改resizeMode属性 #

将resizeMode从contain改为cover，这个属性会等比例缩放图片至完全覆盖容器，超出部分裁剪，刚好满足你“完全覆盖、精准贴合容器”的需求

第二步：优化容器高度逻辑 #

不用手动计算Dimensions高度，改用flex分配空间，适配不同尺寸屏幕更稳定，同时去掉外层容器多余的对齐属性

第三步：清理Image冗余样式 #

Image已经设置宽高100%，不需要额外加flex:1属性

修改后完整代码 #

import { View, Image, StyleSheet } from 'react-native';

// 组件内部代码
<View style={styles.container}>
  <View style={styles.greenContainer}>
    <Image
      source={require('../../Assets/Images/LoginUI/sample_1.jpg')}
      style={styles.fillImage}
    />
  </View>
  <View style={styles.blueContainer}>
    <Image
      source={require('../../Assets/Images/LoginUI/sample_2.png')}
      style={styles.fillImage}
    />
  </View>
</View>

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fdeb1d',
  },
  greenContainer: {
    flex: 1, // 占1份高度，整体父容器flex是1+3=4份，刚好对应你原来的1/3屏占比需求
    width: '100%',
    backgroundColor: 'green',
  },
  blueContainer: {
    flex: 3, // 占3份高度
    width: '100%',
    backgroundColor: 'blue',
  },
  fillImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
});

如果你确实要严格按照1/3屏高度分配绿色容器，不想用flex比例分配，也可以保留Dimensions的写法，只修改resizeMode和外层容器样式即可，效果一致。

内容的提问来源于stack exchange，提问作者Ginxxx