React Native WebView 视频自动高度答案

【问题标题】：React Native WebView autoheight for videoReact Native WebView 视频自动高度
【发布时间】：2020-06-09 09:03:48
【问题描述】：

我正在 WebView 中显示来自 videoUrl 的视频，这是一个 YouTube 嵌入链接。

    <WebView
        javaScriptEnabled={true}
        allowsFullscreenVideo={true}
        allowsInlineMediaPlayback={true}
        ref={(ref) => { webview = ref }}
        onNavigationStateChange={(event) => {
                if(event.url !== videoUrl) {
                        webview.stopLoading()
                        Linking.openURL(event.url)
                }
        }}
        source={{ uri: videoUrl }}
    />

当设置height 或minHeight 时，它会以该高度和全宽显示，并且视频可以正常工作。问题是我没有找到自动设置高度的方法，因此通常会根据设备宽度裁剪视频。我已经尝试过这些库，但无济于事：

https://github.com/iou90/react-native-autoheight-webview
https://github.com/scazzy/react-native-webview-autoheight

【问题讨论】：

嗨，你找到解决办法了吗，我也遇到了同样的问题

标签： android react-native webview expo

【解决方案1】：

您可以从webshell 库中挂钩useAutoheight：

import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature,
  HandleLinkPressFeature,
  useAutoheight
} from '@formidable-webview/webshell';
import { Linking } from 'react-native';
import WebView from 'react-native-webview';
const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature(),
  new HandleLinkPressFeature()
);
export default function MinimalAutoheightWebView(props) {
  const { autoheightWebshellProps } = useAutoheight({
    webshellProps: {
      ...props,
      allowsInlineMediaPlayback: true,
      allowsFullscreenVideo: true,
      onDOMLinkPress: (e) => Linking.openURL(e.uri)
    }
  });
  return <Webshell {...autoheightWebshellProps} />;
}

PS：我把onNavigationStateChange换成了HandleLinkPressFeature + onDOMLinkPress，这样更靠谱。

Full guide here.

【讨论】：