facebook - 在 native 应用程序中嵌入 facebook 视频

Question

是否可以在 react-native 中嵌入公开帖子中的 Facebook 视频？应用程序？

如果可能的话，我相信我需要使用 <WebView>组件，这是我用于其他几种类型的视频嵌入的组件，但 Facebook 嵌入是不同的。我们已经在我们的 Web 客户端上实现了它，但是它有一些 DOM 特定方面，我不确定如何在 react-native 中重新创建它。 .

这是我已成功用于其他视频类型(例如 Vine、Vimeo)的解决方案，但对于 FB，它只渲染图像

<WebView source={{ uri: 'https://www.facebook.com/TheWitBible/videos/1747642252158297/' }} style={ styles.media } />

这是文档 https://developers.facebook.com/docs/plugins/embedded-video-player

这是一个 FB SDK 组件，但我认为它不支持这种用例 https://github.com/facebook/react-native-fbsdk

在 Web 客户端中，有 2 个部分可以让它工作

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml: true,
      version: 'v2.6'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

................................................

render() {
    return (
      <div ref={el => el && FB && FB.XFBML.parse(el)} className="fb-media-wrapper" style={{ width: this.props.width + 'px' }}>
        <div className="fb-video" data-href={this.props.url} data-width={this.props.width}></div>
      </div>
    );
  }

Answer 1

它对我有用

<WebView 
 style={styles.yourStyles} 
 source={{ uri: 'https://www.facebook.com/video/embed?video_id=<YOUR_ID_VIDEO>'}}  />