React Native Expo中切换屏幕方向后如何重新渲染视频组件？

问题核心在于你当前是在组件初始化时一次性获取了window的宽高，切换屏幕方向后这个值不会自动更新，导致Video组件样式还是沿用旧尺寸。按以下步骤修改即可：

1. 用状态管理窗口尺寸 #

把静态的宽高改为用useState保存，这样尺寸变化时状态更新会触发组件重渲染：

import { useState, useEffect, StyleSheet } from 'react';
import { Dimensions, ScreenOrientation } from 'react-native';
import { Video, ResizeMode } from 'expo-av';

export default function YourVideoComponent() {
  const [windowSize, setWindowSize] = useState(Dimensions.get('window'));
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const video = useRef(null);
  // ...其他状态定义

  // 2. 监听窗口尺寸变化
  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setWindowSize(window);
    });

    // 组件卸载时移除监听
    return () => subscription?.remove();
  }, []);

  async function enterFullscreen() {
    if (!isFullscreen) {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
      setIsFullscreen(true);
    } else {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
      setIsFullscreen(false);
    }
  }

  // ...getDurationMillis、getPositionMillis等函数定义

  // 3. 样式使用状态中的动态尺寸
  const styles = StyleSheet.create({
    video: {
      width: windowSize.width,
      height: windowSize.height,
      zIndex: 1
    },
    // ...其他样式
  });

  return (
    <Video
      ref={video}
      style={styles.video}
      source={source}
      resizeMode={ResizeMode.CONTAIN}
      onReadyForDisplay={getDurationMillis}
      onPlaybackStatusUpdate={getPositionMillis}
      onLoad={() => {setIsLoading(false)}}
    />
  );
}

关键说明 #

• Dimensions.addEventListener('change')会在屏幕方向切换、窗口尺寸变化时自动触发，更新状态中的宽高，进而让Video组件使用新尺寸重新渲染。
• 不需要额外调用force-update，状态更新本身就会触发重渲染。之前尝试无效大概率是因为没把尺寸和状态绑定，或者缺少尺寸变化监听。
• 切换方向时同步更新isFullscreen状态，保持逻辑一致性。

这样修改后，切换屏幕方向时Video组件会自动适配新的窗口尺寸，解决宽度显示异常的问题。

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