React Native Webview 在方向更改时重新加载

Question

我正在尝试使用以下 RN 组件为 iOS 和 Android 上的应用程序创建 Youtube 和 Vimeo 的视频查看器：

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

export const VideoPlayer = ({videoId, type}: any) => {

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

export default VideoPlayer

这是可行的，但是从纵向到横向的方向更改（反之亦然）会导致 Webview 重新加载，运行的视频停止，一切都回到开始。 有没有办法告诉 webview 不要在方向改变时重新加载？ 感谢您提前提供任何提示！

Answer 1

尝试使用来自 react-native-webview 的 WebView 我已经使用了与 React-native-webview 相同的代码，它无需重新加载即可正常工作。

import WebView from 'react-native-webview';