React Native WebView横竖屏切换重载问题解决方案咨询

你当前的问题核心是横竖屏切换时，WebView的source属性因窗口尺寸变化被重新创建，导致WebView重载，视频播放中断。以下是具体解决思路和修改方案：

核心原因分析 #

你在source的html字符串中直接嵌入了win.width和win.height，横竖屏切换时Dimensions.get('window')返回的值变化，会生成新的html字符串，触发WebView重新加载整个iframe内容。同时，组件未做重渲染优化，布局变化时可能触发组件整体重渲染。

具体解决步骤 #

1. 移除硬编码尺寸，改用百分比布局 #

把iframe的宽高设置为100%，不再依赖动态变化的窗口尺寸值，这样source的html内容不会随横竖屏变化，避免触发WebView重载。

2. 优化组件重渲染逻辑 #

用React.memo包裹组件，避免props未变化时的不必要重渲染；同时用useState配合useEffect监听尺寸变化，只更新WebView的样式而非source。

修改后的代码示例 #

import React, { useEffect, useState, memo } from 'react';
import WebView from 'react-native-autoheight-webview';
import { Dimensions } from 'react-native';

export const VideoPlayer = memo(({videoId, type}: any) => {
  const [windowSize, setWindowSize] = useState(Dimensions.get('window'));

  // 监听窗口尺寸变化，只更新状态不修改source
  useEffect(() => {
    const onChange = ({window}: any) => {
      setWindowSize(window);
    };
    const subscription = Dimensions.addEventListener('change', onChange);
    return () => subscription?.remove();
  }, []);

  return (
    <>
      <WebView
        allowsFullscreenVideo
        scrollEnabled={false}
        automaticallyAdjustContentInsets
        style={{ width: windowSize.width, height: windowSize.height, flex: 1 }}
        source={{
          html: type === "vimeo" 
            ? `<iframe src="https://player.vimeo.com/video/${videoId}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>`
            : `<iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}" frameborder="0" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`
        }}
      />
    </>
  );
});

export default VideoPlayer;

额外优化建议 #

• 确保WebView的allowFullscreenVideo属性始终开启，保证横竖屏切换时视频能正常全屏播放；
• 对于Android平台，可检查android:configChanges配置，在AndroidManifest.xml中对应Activity添加orientation|screenSize，避免系统重启Activity导致WebView重载：

  <activity
    android:name=".MainActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    ...>
  

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