问题描述
我在 React Native Expo 应用程序中使用嵌入式 YouTube 视频。嵌入的视频位于 WebView
的 react-native-webview
中。我遇到了一个奇怪的问题,我不确定它是在 YouTube 方面还是在 React Native 方面。
当我尝试点击 Android 上的播放按钮时,我在 YouTube 视频上看到了开发者选项。视频无法播放,我无法“单击退出”这些选项。
当我按下播放键时 YouTube 嵌入式视频在 WebView 中的样子
即使我清楚地点击了播放器中心的播放按钮,我还是得到了这个菜单。似乎 Webview 要么对用户触摸输入反应不佳,要么认为它是 longPress。我不是长按视频。当我将 UI 精简为占据整个屏幕的 WebView 时,它工作正常。长按,我看到这个菜单弹出。但是点击播放按钮一切正常。
似乎一旦我减小了 WebView 的大小(即使 YouTube 播放器没有被切断或压扁),它也没有正确响应。在 iOS 上,一切正常。
设备出现问题 当我开始在三星 galaxy S7 上进行测试时,我注意到了这个问题。在 Google Pixel 3 模拟器上运行该应用程序似乎按预期工作。
这是带有嵌入 YouTube 视频的简单 WebView。
<WebView
allowsInlinemediaplayback={true}
source={{ uri: "https://www.youtube.com/embed/WOi0vnzcEzA?playsinline=1&rel=0&mute=1autoplay=1&fs=0" }}
/>
谢谢
解决方法
我终于弄清楚发生了什么。我希望这可以在将来对某人有所帮助。
我的 WebView 被包裹在一个 TouchableWithoutFeedback 中。出于某种原因(这可能是正确的行为,但超出了我的 RN 能力),它“阻止”了正确的用户输入到 WebView 中。在我将 WebView 移到 TouchableWithoutFeedback 之外后,一切都按预期进行。