React Native中视频与图片的适配显示及尺寸调整咨询

核心思路 #

通过固定容器宽高比，让媒体内容在容器内自适应渲染，同时强制视频容器保持竖屏形态，确保横屏视频以竖屏方式展示，且所有媒体不受设备方向变化影响。

Fast Image 图片适配调整 #

如果需要图片自适应自身比例展示，同时占满容器宽度：

postImageContainer: {
  width: '100%', // 或根据布局设置固定宽度，如 screenWidth * 0.48
  marginBottom: 12,
},
postImage: {
  width: '100%',
  height: undefined, // 让组件自动计算高度
  borderRadius: 5,
  resizeMode: 'contain',
},

若需固定正方形展示，给postImage添加aspectRatio: 1即可。

React Native Video 横屏视频竖屏展示 #

给视频容器设置竖屏比例，让视频在容器内自适应：

videoContainer: {
  width: '100%',
  aspectRatio: 9/16, // 强制竖屏容器比例
  alignSelf: 'center',
  borderRadius: 5,
  overflow: 'hidden', // 防止内容溢出
},
video: {
  flex: 1,
  resizeMode: 'contain', // 横屏视频完整显示，上下留黑边；若要铺满容器用'cover'
},

完整组件示例 #

import React from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';
import FastImage from 'react-native-fast-image';
import Video from 'react-native-video';

const MediaComponent = ({ mediaList }) => {
  const { width: screenWidth } = useWindowDimensions(); // 自动监听屏幕尺寸变化

  return (
    <View style={styles.wrapper}>
      {mediaList.map((media, idx) => (
        <View key={idx} style={styles.mediaWrap}>
          {media.type === 'image' ? (
            <FastImage
              source={{ uri: media.url }}
              style={styles.postImage}
              resizeMode={FastImage.resizeMode.contain}
            />
          ) : (
            <View style={styles.videoContainer}>
              <Video
                source={{ uri: media.url }}
                style={styles.video}
                resizeMode="contain"
                controls={true}
              />
            </View>
          )}
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    width: '100%',
    paddingHorizontal: 8,
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  mediaWrap: {
    width: '48%', // 双列布局示例，可改为100%单列
  },
  postImage: {
    width: '100%',
    height: undefined,
    borderRadius: 5,
    aspectRatio: 1, // 固定正方形，可根据需求移除
  },
  videoContainer: {
    width: '100%',
    aspectRatio: 9/16,
    borderRadius: 5,
    overflow: 'hidden',
  },
  video: {
    flex: 1,
  },
});

export default MediaComponent;

关键注意点 #

1. 使用useWindowDimensions替代Dimensions.get('window')，可自动监听设备方向/尺寸变化，触发组件重渲染，确保布局始终适配当前屏幕。
2. 视频的resizeMode可选值：
   • contain：完整展示视频内容，容器内未填充区域留空（适合保留完整画面）
   • cover：铺满容器，超出部分裁剪（适合沉浸式展示）

内容的提问来源于stack exchange，提问作者katari lakshman kumar