Пытаюсь использовать waveurfer. js с ReactNative, но получаю Can't find variable: document - PullRequest
Новая
       116

Пытаюсь использовать waveurfer. js с ReactNative, но получаю Can't find variable: document

0 голосов
/ 11 июля 2020

Я пытаюсь интегрировать waveurfer. js (http://wavesurfer-js.org/docs/) в приложение ReactNative, но получаю исключение компонента: не удается найти переменную: документ.

Я понимаю, что ReactNative является фреймворком и не раскрывает DOM, поэтому мне интересно, есть ли способ обернуть волновой серфер. js код, чтобы заставить его работать с ReactNative, или мне нужно изменить волновой серфер. js код, и если да, то как?

Основные части моего файла App. js: 


    import React from 'react';
    import { Appbar } from 'react-native-paper';
    import { Button } from 'react-native-paper';
    import Icon from 'react-native-vector-icons/MaterialIcons';
    import { Colors } from 'react-native-paper';
    import WaveWrapper from './wavewrapper.js';

    const App: () => React$Node = () => {
      return (
    //..
    <View style={styles.eqContainer} nativeID="eqview">
        <WaveWrapper />
    </View>
    //..
      );
    };
    export default App;

Файл wavewrapper. js: 


    import WaveSurfer from './wavesurfer.js';
    import { Text, View } from 'react-native';
    import React from 'react';

    class WaveWrapper extends React.Component {

      componentDidMount() {

        const wavesurfer = WaveSurfer.create({
            container: "eqview",
          });

      }

      render() {
          return (
            <View ref={"eqview"}>

            </View>
          );
     }
    }

    export default WaveWrapper;

Я почти уверен, что здесь тоже неправильно обрабатывается 'ref', так что любая помощь по этому поводу также будет оценена. И примеры того, что вызывает исключение компонента в файле waveurfer. js (ссылки на объект документа): 


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

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

Итак, еще раз, есть ли способ использовать waveurfer. js без поправляя свой код? А если нет, какие изменения я должен внести в него?

Любая помощь будет принята с благодарностью.

Ник

Ответы [ 2 ]

0 голосов
/ 11 июля 2020

Упомянутая вами библиотека предназначена для ReactJS и не будет работать с React Native. Используйте https://github.com/juananime/react-native-audiowaveform

0 голосов
/ 11 июля 2020

Насколько я понимаю, waveurfer. js - это своего рода библиотека визуализации голоса, которая построена поверх элемента canvas. Поэтому я не думаю, что вы можете использовать его в React Native. Вероятно, вы можете использовать его в WebView. WebView пригодятся, когда дело доходит до рендеринга SVG / холста для диаграмм.

...