React Native中如何实现类似Instagram的图片宽度适配屏幕、保留原图高度效果

要实现宽度铺满屏幕、高度按素材原始比例自适应的效果，核心逻辑是先拿到设备屏幕宽度，再结合素材的原始宽高比计算出实际渲染高度，保证素材不会拉伸变形。 #

第一步：获取设备屏幕宽度 #

推荐使用React Native原生提供的useWindowDimensions钩子，天生支持响应式更新，横竖屏切换时会自动返回新的屏幕尺寸：

import { useWindowDimensions } from 'react-native';

// 组件内部调用
const { width: screenWidth } = useWindowDimensions();

第二步：适配图片资源 #

分为本地静态图片和远程图片两种场景：

本地静态图片 #

通过Image.resolveAssetSource直接拿到本地图片的原始宽高，计算渲染高度即可：

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

// 引入本地图片
const localImage = require('./assets/your-image.jpg');
// 获取原始尺寸
const { width: originalWidth, height: originalHeight } = Image.resolveAssetSource(localImage);
// 计算适配高度
const renderHeight = screenWidth * originalHeight / originalWidth;

// 渲染
<Image
  source={localImage}
  style={{
    width: screenWidth,
    height: renderHeight,
  }}
  resizeMode="cover"
/>

远程图片 #

远程图片需要先异步获取原始尺寸，再计算高度：

import { useState, useEffect } from 'react';
import { Image } from 'react-native';

const [renderHeight, setRenderHeight] = useState(0);
const remoteImageUrl = '你的远程图片地址';

useEffect(() => {
  // 异步获取远程图片尺寸
  Image.getSize(remoteImageUrl, (originalWidth, originalHeight) => {
    const calculatedHeight = screenWidth * originalHeight / originalWidth;
    setRenderHeight(calculatedHeight);
  });
}, [screenWidth]);

// 渲染
{renderHeight > 0 && (
  <Image
    source={{ uri: remoteImageUrl }}
    style={{
      width: screenWidth,
      height: renderHeight,
    }}
    resizeMode="cover"
  />
)}

第三步：适配视频资源 #

以常用的react-native-video库为例，在视频加载完成的回调中获取原始尺寸计算高度即可：

import { useState } from 'react';
import Video from 'react-native-video';

const [videoHeight, setVideoHeight] = useState(200); // 200为默认占位高度

// 渲染
<Video
  source={{ uri: '你的视频地址' }}
  style={{
    width: screenWidth,
    height: videoHeight,
  }}
  onLoad={(data) => {
    // 拿到视频原始宽高
    const { width: originalVideoWidth, height: originalVideoHeight } = data.naturalSize;
    const calculatedHeight = screenWidth * originalVideoHeight / originalVideoWidth;
    setVideoHeight(calculatedHeight);
  }}
  resizeMode="contain"
/>

• 如果需要适配横竖屏切换，只需在useEffect中监听screenWidth的变化，重新计算素材高度即可
• 多图列表场景建议提前缓存素材尺寸，避免重复计算导致的布局跳动
• 资源加载过程中可以添加占位骨架屏，提升用户体验

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