ProgressComponent в response-native-track-player: супер-выражение должно быть либо нулевым, либо функцией

Question

Моя цель состоит в том, чтобы отследить позицию воспроизведения звука и позицию буфера от response-native-track-player. Я провел целый день с различными вариантами и, наконец, я публикую здесь. Надеюсь, кто-то может помочь с этим. Также я новичок ie в реагировать родной. Я надеюсь, что хорошо объяснено ниже о проблеме, если нет, пожалуйста, дайте мне знать.

У меня есть проблема в ProgressComponent response-native-track-player. Код basi c начинает работать для воспроизведения удаленного аудиофайла, но проблема возникает при использовании ProgressComponent для получения позиции, продолжительности и буферизованной позиции воспроизводимого аудио.

Следующая ошибка выдается, когда я расширяю {ProgressComponent} в имени моего пользовательского компонента ProgressBar. js.

Супер-выражение должно быть либо нулевым, либо функцией

Замечание: если я изменю расширение ProgressComponent на простое {Component} с реагировать, все начнет работать. В основном это выглядит как проблема экспорта, но я уже экспортировал модуль из ProgressBar. js. Из поста я видел, что циклические зависимости также могут выдавать похожую ошибку.

https://medium.com/@anuhosad / реагировать на ошибки-супер-выражение-должно-либо-быть-ноль-или-функцией-4aac6e5173ad

Ниже приведен исходный код что я использовал в своем проекте.

Приложение. js

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import TrackPlayer from 'react-native-track-player'
import ProgressBar from './src/ProgressBar.js'
import MyComponent from './MyComponent'

export default class App extends Component {

  componentDidMount() {
    var track = {
        id: 'unique track id',
        url: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3',
        title: 'Avaritia',
        artist: 'deadmau5',
        album: 'while(1<2)',
        genre: 'Progressive House, Electro House',
        date: '2014-05-20T07:00:00+00:00',

        artwork: 'http://example.com/avaritia.png',
    };

    var track2 = {
        id: 'unique track id',
        url: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3',
        title: 'Avaritia',
        artist: 'deadmau5',
        album: 'while(1<2)',
        genre: 'Progressive House, Electro House',
        date: '2014-05-20T07:00:00+00:00',

        artwork: 'http://example.com/avaritia.png',
    };

    TrackPlayer.setupPlayer().then(async () => {
      TrackPlayer.add([track]).then(function() {

      });

      TrackPlayer.play();
    });
  }

  render() {
    return(
      <SafeAreaView>
        <Text>Begin +{}+ Ensd</Text>
        <ProgressBar />
      </SafeAreaView>
    )
  }
}

ProgressBar. js

import React from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import TrackPlayer, {ProgressComponent} from 'react-native-track-player';

class ProgressBar extends ProgressComponent {
  render() {
    // const position = formatTime(Math.floor(this.state.position));
    // const duration = formatTime(Math.floor(this.state.duration));
    // const info = position + ' / ' + duration;
    //
    // let progress = this.getProgress() * 100;
    // let buffered = this.getBufferedProgress() * 100;
    //
    // console.log('Progress - '+progress)
    // console.log('Buffered - '+buffered)

    return(
      <View style={styles.container}>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: 300,
    height: 30,
    backgroundColor: 'red'
  }
})

module.exports = ProgressBar;