React Native：调整图片大小并实现屏幕顶部完整显示

方法一：使用resizeMode: 'top' #

resizeMode: 'top'会让图片保持原始比例完整显示，同时垂直方向顶部对齐、水平方向默认居中，刚好匹配你的需求：

修改样式代码：

const styles = StyleSheet.create({
  topStartImage: {
    resizeMode: "top", // 替换原有的contain
    width: screen.width * 0.6,
    height: screen.height * 0.4,
    backgroundColor: 'green',
    alignSelf: 'center' // 保持图片水平居中，不需要可删除
  },
})

方法二：用objectPosition配合resizeMode: 'contain' #

如果需要更灵活的位置控制（比如水平左/右对齐），可以保留resizeMode: 'contain'，通过objectPosition指定图片在容器内的位置：

const styles = StyleSheet.create({
  topStartImage: {
    resizeMode: "contain",
    width: screen.width * 0.6,
    height: screen.height * 0.4,
    backgroundColor: 'green',
    objectPosition: 'top center', // 可改为'top left'等自定义位置
    alignSelf: 'center'
  },
})

补充说明 #

父View的flex:1已经确保子元素从屏幕顶部开始排列，问题核心是图片在自身宽高容器内居中显示，上述两种方法都能让图片在容器内垂直顶部对齐，同时保持完整显示效果。

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