【问题标题】:React Native - Is there any way to use vimeo video player on react native app?React Native - 有没有办法在反应原生应用程序上使用 vimeo 视频播放器?
【发布时间】:2019-08-30 09:06:47
【问题描述】:

我将this package 用于 vimeo 视频播放器。但出现以下错误。 还有其他方法可以在 react native 应用上使用 vimeo 播放器吗?

Invariant Violation: Invariant Violation: requireNativeComponent: "RCTWebViewBridge" 在 UIManager 中找不到。

【问题讨论】:

  • 您是否尝试过视频随附的嵌入式 URL?我想你可以直接使用它们。

标签: react-native vimeo vimeo-player


【解决方案1】:

我已经使用了这个代码:

// NOTE: Injecting code here due to react-native webview issues when overriding
// the onMessage method. See here: https://github.com/facebook/react-native/issues/10865
export const injectedCode = `
(function() {
var originalPostMessage = window.postMessage;
var patchedPostMessage = function(message, targetOrigin, transfer) {
  originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = function() {
  return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
};
window.postMessage = patchedPostMessage;
})();
`;


   getVimeoPageURL(videoId) {
        return 'https://myagi.github.io/react-native-vimeo/v0.3.0.html?vid=' + videoId;
    }

render() {
        return (
            <WebView
                ref="webviewBridge"
                style={{
                    // Accounts for player border
                    marginTop: -8,
                    marginLeft: -10,
                    height: this.props.height
                }}
                injectedJavaScript={injectedCode}
                source={{ uri: this.getVimeoPageURL(this.props.videoId) }}
                scalesPageToFit={this.props.scalesPageToFit}
                scrollEnabled={false}
                onMessage={this.onBridgeMessage}
                onError={error => console.error(error)}
            />
        );
    }

【讨论】:

  • 这是有效的。谢谢@crazyvk 如何启用全屏按钮?
  • 你作为注入代码传递了什么?
  • @JuanAraneta 我已在我的回答中添加。
  • 我可以有 html 页面 react-native-vimeo/v0.3.0.html 吗?,以防您的服务器出现故障。我可以在我的服务器上托管
猜你喜欢
  • 2012-11-02
  • 1970-01-01
  • 1970-01-01
  • 2021-12-28
  • 2022-10-23
  • 2019-07-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多