时间戳

首页 > 解决方案 > 尝试将 wavesurfer.js 与 ReactNative 一起使用，但得到 Can't find variable: document

reactjs - 尝试将 wavesurfer.js 与 ReactNative 一起使用，但得到 Can't find variable: document

问题描述

我正在尝试将 wavesurfer.js ( http://wavesurfer-js.org/docs/ ) 集成到 ReactNative 应用程序中，但出现组件异常：找不到变量：文档。

我知道 ReactNative 是一个框架并且不暴露 DOM，所以我想知道是否有一种方法可以包装 wavesurfer.js 代码以使其与 ReactNative 一起使用，或者我是否必须更改 wavesurfer.js 代码本身，如果又怎样？

我的 App.js 文件的主要部分是：

    从“反应”导入反应；
    从'react-native-paper'导入{ Appbar}；
    从'react-native-paper'导入{按钮}；
    从 'react-native-vector-icons/MaterialIcons' 导入图标；
    从'react-native-paper'导入{颜色}；
    从“./wavewrapper.js”导入 WaveWrapper；

    const App: () => React$Node = () => {
      返回 （
    //..
    <View style={styles.eqContainer} nativeID="eqview">
        <WaveWrapper />
    </查看>
    //..
      );
    };
    导出默认应用程序；

wavewrapper.js 文件是：

    从“./wavesurfer.js”导入 WaveSurfer；
    从'react-native'导入{文本，视图}；
    从“反应”导入反应；

    类 WaveWrapper 扩展 React.Component {

      组件DidMount() {

        常量 wavesurfer = WaveSurfer.create({
            容器：“eqview”，
          });

      }

      使成为（） {
          返回 （
            <查看参考={“eqview”}>

            </查看>
          );
     }
    }

    导出默认 WaveWrapper；

我很确定我在这里也弄错了 'ref' 处理，所以对此的任何帮助也将不胜感激。在 wavesurfer.js 文件（对文档对象的引用）中导致组件异常的示例有：

    _this.container = 'string' == typeof params.container ? document.querySelector(_this.params.container) : _this.params.container;

    _this.mediaContainer = document.querySelector(_this.params.mediaContainer);

那么再一次，有没有办法在不调整代码的情况下使用 wavesurfer.js？如果没有，我必须对其进行哪些更改？

任何帮助将不胜感激。

缺口

标签： reactjsreact-nativenativedocument

解决方案

canvas据我了解，wavesurfer.js 是一种建立在元素之上的语音可视化库。所以我认为你不能在 React Native 上使用它。您可能可以在WebView. WebView当涉及到图表的 SVG/画布渲染时，s 会派上用场。

推荐阅读