ClojureScript + React-Native - 嵌入视频

Posted 2023-03-15

【中文标题】ClojureScript + React-Native - 嵌入视频

【英文标题】：ClojureScript + React-Native - Embed Videos

【发布时间】：2018-11-15 10:42:43

【问题描述】：

我是 ClojureScript 的新手。我想使用 ClojureScript 和 React Native 将视频 (Youtube) 嵌入到混合移动应用程序中。我尝试在 ClojureScript 中实现 react-native-video 和 react-native-youtube 插件来实现这一点。但是，这两者都以崩溃告终。我不知道引用图书馆是否有问题。

使用 react-native-video：

(def Video (js/require "react-native-video"))
(def video-view (r/adapt-react-class Video))

组件引用为：

[video-view :style :position "absolute"
                            :top 0
                            :bottom 0
                            :left 0
                            :right 0
                      :source :uri "https://www.youtube.com/watch?v=M8Fn8SfXw3M"]

使用 react-native-youtube：

(def YouTube (js/require "react-native-youtube"))
(def video-view (r/adapt-react-class YouTube))

组件参考：

[video-view :style :flex 1
                              :margin-bottom 60
                              :padding-top 10
                              :padding-bottom 10
                      :video-id "M8Fn8SfXw3M"
                      :play true
                      :fullscreen true
                      :loop true]

这两个选项都不起作用。

以下是崩溃报告：

> Invariant Violation: Element type is invalid: expected a string (for
> built-in components) or a class/function (for composite components)
> but got: object This error is located at:
>      in RCTView
>      in RCTView
>      in RCTScrollView
>      in ScrollView
>      in t
>      in RCTView
>      in :page-art-single
>      in RCTView
>      in .a
>      in RCTView
>      in :main
>      in py
>      in RCTView
>      in RCTView
>      in t  Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite
> components) but got: object.    This error is located at:
>      in RCTView
>      in RCTView
>      in RCTScrollView
>      in ScrollView
>      in t
>      in RCTView
>      in :page-art-single
>      in RCTView
>      in .a
>      in RCTView
>      in :main
>      in py
>      in RCTView
>      in RCTView
>      in t  undefined is not an object (evaluating 'this.map.setNativeProps') D/ReactNative(15325):
> ReactInstanceManager.detachViewFromInstance()

我正在使用 lein 来编译 ClojureScript Re-Natal 来构建这个基于 ClojureScript 的 React Native 应用程序。

上面的代码有什么问题吗？有人帮忙吗？

参考：

react-native-video

react-native-youtube

【参考方案1】：

在不知道你遇到什么错误以及你有什么设置的情况下，尝试像这样调用模块：

(def Video (aget (js/require "react-native-video") "default"))

【讨论】：

我更新了崩溃报告和我用于构建项目的实用程序。我尝试了以下方法。 (def Video (js/require "react-native-video")) (def video-view (r/adapt-react-class (oget Video "default"))) 这次没有crash，可以顺利去到添加视频视图组件的页面。但是，我看不到视图中呈现的视频组件。

如果将 Video 打印到控制台会得到什么？ (js/console.log Video)

它已经打印了视频组件对象。但是，我在视图中看不到组件。 @vikeri

【参考方案2】：

我可以使用 ReactNative WebView 嵌入 YouTube 视频。

(def ReactNative (js/require "react-native"))
(def web-view (r/adapt-react-class (oget ReactNative "WebView")))

组件参考：

[web-view  :style 
                            :width 400
                            :height 200
                            :zIndex 10
                      :javascriptEnabled true
                      :domStorageEnabled true
                      :source :uri "https://www.youtube.com/embed/M8Fn8SfXw3M"]

我认为 react-native-video 不支持 youtube 视频。