尝试将 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？如果没有，我必须对其进行哪些更改？

任何帮助都将不胜感激。

尼克

【问题讨论】：

标签： reactjs react-native native document

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：