React Native中如何在Modal内设置适配全机型的无拉伸全屏图片？

问题根源 #

你现有代码里的resizeMode='stretch'是图片被拉伸的直接原因——这个属性会强制图片填满容器，完全忽略原始宽高比。要实现全屏且不拉伸，得调整resizeMode并优化图片样式。

具体解决方法 #

选对resizeMode #

根据需求二选一：

• cover：保持图片比例，填满整个屏幕，超出屏幕的部分会被裁剪（适合要图片完全覆盖屏幕，能接受边缘裁剪的场景）
• contain：保持图片比例，完整显示整张图片，屏幕空白区域会留边（适合必须展示完整图片内容的场景）

调整图片样式 #

让图片占满Modal的可用空间，配合resizeMode就能适配所有设备。另外注意：本地图片必须用require()引入，不能直接写字符串路径，否则加载不出来。

修改后的完整代码 #

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

const FullScreenImageModal = (props) => {
  const imageStyle = {
    flex: 1,
    width: '100%',
    height: '100%',
  };

  return (
    <Modal
      animationType="fade"
      visible={props.isOpen}
      onRequestClose={props.onCloseModal}
    >
      <SafeAreaView style={{ flex: 1, backgroundColor: 'black' }}>
        <View style={{ flex: 1 }}>
          <Image
            source={require("path/to/local/image")}
            resizeMode='cover' // 要完整显示就换成contain
            style={imageStyle}
          />
        </View>
      </SafeAreaView>
    </Modal>
  );
};

export default FullScreenImageModal;

额外细节 #

• SafeAreaView的背景色可以按需调整，比如用黑色搭配cover模式，裁剪部分会更自然
• 如果用contain模式，背景色会显示在图片没覆盖到的区域，选和图片风格匹配的颜色就行
• 不需要手动设置固定宽高，flex:1配合width: '100%'、height: '100%'就能让图片自适应所有设备屏幕

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