在 React Native 应用程序中嵌入 Youtube 视频答案

【问题标题】：Embedding Youtube Videos in React Native Application在 React Native 应用程序中嵌入 Youtube 视频
【发布时间】：2018-09-05 06:15:37
【问题描述】：

我了解这是一个高度记录的问题，我一直在努力寻找解决方案，但到目前为止我在网上找到的所有内容都没有奏效。所以我想展示我尝试做的事情以及出了什么问题：

我尝试在 WebView 中嵌入 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>

感谢任何帮助。

谢谢

【问题讨论】：

我还没有解决这个问题，但我会在我解决的时候发布。使用 react-native-youtube 包对我不起作用，但我会及时发布我的解决方案

标签： android react-native webview youtube

【解决方案1】：

https://github.com/inProgress-team/react-native-youtube

import YouTube from 'react-native-youtube'

<YouTube
  videoId="KVZ-P-ZI6W4"   // The YouTube video ID
  play={true}             // control playback of video with true/false
  fullscreen={true}       // control whether the video should play in fullscreen or inline
  loop={true}             // control whether the video should loop when ended

  onReady={e => 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 })}

  style={{ alignSelf: 'stretch', height: 300 }}
/>

【讨论】：

这可能很好，但您必须 detach expo 中的 expo 项目，有时您会遇到许多不需要和意外的问题，这需要大量的努力来解决。这就是我看到react-native 限制和困难的地方。
这取决于 Youtube 应用

【解决方案2】：

您必须在 iframe 标记的属性中使用 ' '，因为您将此 html 代码包装在“”中

像这样：

<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>" }}
/>

【讨论】：