react-native-youtube-iframe安卓端播放/暂停/设置/全屏按钮失效求助

1. 检查react-native-webview版本兼容性 #

react-native-youtube-iframe依赖react-native-webview，RN 0.72.x对webview版本有特定要求，版本不匹配会导致触摸事件异常：

• 查看当前webview版本：执行 npm list react-native-webview 或 yarn list react-native-webview
• 安装适配RN 0.72.3的稳定版webview：npm install react-native-webview@13.6.3
• 重新构建安卓项目：cd android && ./gradlew clean && cd .. && npx react-native run-android

2. 启用安卓webview硬件加速 #

RN 0.72可能默认调整了webview硬件加速设置，导致触摸响应失效。可通过两种方式开启：

• 在安卓AndroidManifest.xml的主Activity中添加属性：

<activity
  android:name=".MainActivity"
  android:hardwareAccelerated="true">
  <!-- 其他原有配置 -->
</activity>

• 或在组件代码中通过webViewProps配置：

import YoutubePlayer from 'react-native-youtube-iframe';

<YoutubePlayer
  videoId="你的视频ID"
  webViewProps={{
    androidHardwareAccelerationDisabled: false,
    allowsInlineMediaPlayback: true,
  }}
/>

3. 调整webview触摸交互配置 #

RN 0.72的webview可能默认拦截了触摸事件，需在webViewProps中开启相关权限：

<YoutubePlayer
  videoId="你的视频ID"
  webViewProps={{
    domStorageEnabled: true,
    javaScriptEnabled: true,
    scrollEnabled: true,
    nestedScrollEnabled: true,
  }}
/>

4. 升级react-native-youtube-iframe到最新版 #

旧版本库未适配RN 0.72的底层变化，执行升级命令：

npm update react-native-youtube-iframe
# 或 yarn upgrade react-native-youtube-iframe

升级后重新构建项目测试。

5. 清除安卓端webview缓存 #

缓存残留可能导致旧配置生效，可通过以下方式清除：

• 在设备应用设置中清除当前应用的缓存和数据
• 或执行 npx react-native run-android --clean 重新构建并安装应用

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