Android 在React本机应用程序中嵌入Youtube视频_Android_React Native_Webview_Youtube

Android 在React本机应用程序中嵌入Youtube视频

android react-native webview youtube

Android 在React本机应用程序中嵌入Youtube视频,android,react-native,webview,youtube,Android,React Native,Webview,Youtube,我知道这是一个高度文档化的问题，我一直在努力寻找解决方案，但到目前为止，我在网上找到的一切都不起作用。因此，我想展示一下我尝试过做什么，以及哪里出了问题：我尝试将Youtube视频嵌入到网络视图中。下面的方法成功地构建了应用程序，但是当我点击视频时，应用程序崩溃了。我知道这适用于IOS，但我正在android模拟器上测试构建应用程序 <WebView style={ styles.video } javaScriptEnabled={true} domStorag

我知道这是一个高度文档化的问题，我一直在努力寻找解决方案，但到目前为止，我在网上找到的一切都不起作用。因此，我想展示一下我尝试过做什么，以及哪里出了问题：

我尝试将Youtube视频嵌入到网络视图中。下面的方法成功地构建了应用程序，但是当我点击视频时，应用程序崩溃了。我知道这适用于IOS，但我正在android模拟器上测试构建应用程序

<WebView
    style={ styles.video }
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }}
/>

我尝试的另一种方法是这样，但我得到了一个错误

<WebView
    style={ styles.video }
    javaScriptEnabled={true}
    source={{ html: "<html><body><iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>"  }}
/>


error: bundling failed: SyntaxError in C:\DIRECTORY\VideoPage.js: C:/DIRECTORY/VideoPage.js: Unexpected token, expected , (33:56)
31 |               style={ styles.video }
32 |               javaScriptEnabled={true}
> 33 |             source={{ html: "<html><body><iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>"  }}
 |                                                         ^
34 |             />
35 |
36 |           </View>


错误：绑定失败：C:\DIRECTORY\VideoPage.js:C:/DIRECTORY/VideoPage.js中的语法错误：意外标记，应为，（33:56）
31 | style={style.video}
32 | javaScriptEnabled={true}
>33 | source={{html:'}
|                                                         ^
34 |             />
35 |
36 |

感谢您的帮助

谢谢

从“react native YouTube”导入YouTube
this.setState（{isReady:true}）
onChangeState={e=>this.setState（{status:e.state}）}
onChangeQuality={e=>this.setState（{quality:e.quality}）}
onError={e=>this.setState（{error:e.error}）}
样式={{alignSelf:'stretch'，高度：300}
/>

在将此html代码包装到“”中时，必须在iframe标记的属性中使用“”

像这样：

<WebView
javaScriptEnabled={true}
source={{ html: "<html><body><iframe width='560' height='315' src='https://www.youtube.com/embed/RJa4kG1N3d0' frameborder='0' allowfullscreen></iframe></body></html>" }}
/>

我还没有解决这个问题，但我会在解决后发布。使用react native youtube软件包对我不起作用，但我会及时发布我的解决方案。这可能很好，但您必须

将您的expo项目从expo中分离出来，有时您会面临许多不需要的和意外的问题，这些问题需要花费大量精力才能解决。这就是我看到的react native限制和困难所在。这取决于Youtube应用程序
<WebView
javaScriptEnabled={true}
source={{ html: "<html><body><iframe width='560' height='315' src='https://www.youtube.com/embed/RJa4kG1N3d0' frameborder='0' allowfullscreen></iframe></body></html>" }}
/>