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

Posted 2023-02-16

【中文标题】尝试将 wavesurfer.js 与 ReactNative 一起使用，但得到 Can\'t find variable: document

【英文标题】：Trying to use wavesurfer.js with ReactNative but get Can't find variable: document尝试将 wavesurfer.js 与 ReactNative 一起使用，但得到 Can't find variable: document

【发布时间】：2020-10-31 16:46:50

【问题描述】：

我正在尝试将 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 = () => 返回 （ //.. 查看> //.. ); ; 导出默认应用程序；

wavewrapper.js 文件是：

从“./wavesurfer.js”导入 WaveSurfer； 从'react-native'导入文本，视图； 从“反应”导入反应； 类 WaveWrapper 扩展 React.Component 组件DidMount() 常量 wavesurfer = WaveSurfer.create( 容器：“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？如果没有，我必须对其进行哪些更改？

任何帮助都将不胜感激。

尼克

【参考方案1】：

据我了解，wavesurfer.js 是某种基于canvas 元素的语音可视化库。所以我认为你不能在 React Native 上使用它。您可能可以在WebView 中使用它。 WebViews 在处理图表的 SVG/canvas 渲染时会派上用场。

【参考方案2】：

您提到的库是用于 ReactJS 的，不适用于 React Native。 使用https://github.com/juananime/react-native-audiowaveform