Проверьте метод рендеринга PodCastScreen React Native

Я создаю приложение для плеера в React Native, и у меня появляется эта ошибка. Я никогда не видел этой ошибки. Я пробовал очистить кеш и проверить мой импорт и экспорт.

Первый набор кода взят из компонента PodCastScreen, а второй набор кода - из компонента Player.

Проверьте метод рендеринга PodCastScreen React Native

Вот мой код:

import React, {Component} from 'react';
import {Button, Platform, StyleSheet, Text, View} from 'react-native';
import {createStackNavigator, createDrawerNavigator} from 'react-navigation';
import { Player } from './PodcastLayers/Player';

export const TRACKS = [
{
title: 'Stressed Out',
artist: 'Twenty One Pilots',
PodcastArtUrl: "http://36.media.tumblr.com/14e9a12cd4dca7a3c3c4fe178b607d27/tumblr_nlott6SmIh1ta3rfmo1_1280.jpg",
audioUrl: "http://russprince.com/hobbies/files/13%20Beethoven%20-%20Fur%20Elise.mp3",
},
{
title: 'Love Yourself',
artist: 'Justin Bieber',
PodcastArtUrl: "http://arrestedmotion.com/wp-content/uploads/2015/10/JB_Purpose-digital-deluxe-album-cover_lr.jpg",
audioUrl: 'http://oranslectio.files.wordpress.com/2013/12/39-15-mozart_-adagio-fugue-in-c-minor-k-546.mp3',
},
{
title: 'Hotline Bling',
artist: 'Drake',
PodcastArtUrl: 'https://upload.wikimedia.org/wikipedia/commons/c/c9/Drake_-_Hotline_Bling.png',
audioUrl: 'http://russprince.com/hobbies/files/13%20Beethoven%20-%20Fur%20Elise.mp3',
},
];

class PodCastScreen extends React.Component{
render() {
return (

<Player tracks = {TRACKS} /> )
}
}

export default PodCastScreen;

Код компонента проигрывателя:

import React, { Component } from 'react';
import {
View,
Text,
StatusBar,
} from 'react-native';
import Header from './Header';
import PodcastArt from './PodcastArt';
import PodcastDetails from './PodcastDetails';
import { SeekBar } from './SeekBar';
import Controls from './Controls';
import Video from 'react-native-video';

class Player extends Component {
constructor(props) {
super(props);

this.state = {
  paused: true,
  totalLength: 1,
  currentPosition: 0,
  selectedTrack: 0,
  repeatOn: false,
  shuffleOn: false,
};
 }

 setDuration(data) {
// console.info(totalLength);
this.setState({totalLength: Math.floor(data.duration)});
}

setTime(data) {
//console.info(data);
this.setState({currentPosition: Math.floor(data.currentTime)});
}

seek(time) {
time = Math.round(time);
this.refs.audioElement && this.refs.audioElement.seek(time);
this.setState({
  currentPosition: time,
  paused: false,
});
}

onBack() {
if (this.state.currentPosition < 10 && this.state.selectedTrack > 0)          {
  this.refs.audioElement && this.refs.audioElement.seek(0);
  this.setState({ isChanging: true });
  setTimeout(() => this.setState({
    currentPosition: 0,
    paused: false,
    totalLength: 1,
    isChanging: false,
    selectedTrack: this.state.selectedTrack - 1,
  }), 0);
} else {
  this.refs.audioElement.seek(0);
  this.setState({
    currentPosition: 0,
  });
}
}

onForward() {
if (this.state.selectedTrack < this.props.tracks.length - 1) {
  this.refs.audioElement && this.refs.audioElement.seek(0);
  this.setState({ isChanging: true });
  setTimeout(() => this.setState({
    currentPosition: 0,
    totalLength: 1,
    paused: false,
    isChanging: false,
    selectedTrack: this.state.selectedTrack + 1,
  }), 0);
}
}



render() {
const track = this.props.tracks[this.state.selectedTrack];
const video = this.state.isChanging ? null : (
  <Video source = {{uri: track.audioUrl}} // Can be a URL or a local file.
    ref = "audioElement"
    paused = {this.state.paused}               // Pauses playback entirely.
    resizeMode = "cover"           // Fill the whole screen at aspect ratio.
    repeat = {true}                // Repeat forever.
    onLoadStart = {this.loadStart} // Callback when video starts to load
    onLoad = {this.setDuration.bind(this)}    // Callback when video loads
    onProgress = {this.setTime.bind(this)}    // Callback every ~250ms with currentTime
    onEnd = {this.onEnd}           // Callback when playback finishes
    onError = {this.videoError}    // Callback when video cannot be loaded
    style = {styles.audioElement} />
);

return (
  <View style = {styles.container}>
    <StatusBar hidden = {true} />
    <Header message = "Playing From Charts" />
    <PodcastArt url = {track.PodcastArtUrl} />
    <PodcastDetails title = {track.title} artist = {track.artist} />
    <SeekBar
      onSeek = {this.seek.bind(this)}
      trackLength = {this.state.totalLength}
      onSlidingStart = {() => this.setState({paused: true})}
      currentPosition = {this.state.currentPosition} />
    <Controls
      onPressRepeat = {() => this.setState({repeatOn : !this.state.repeatOn})}
      repeatOn = {this.state.repeatOn}
      shuffleOn = {this.state.shuffleOn}
      forwardDisabled = {this.state.selectedTrack === this.props.tracks.length - 1}
      onPressShuffle = {() => this.setState({shuffleOn: !this.state.shuffleOn})}
      onPressPlay = {() => this.setState({paused: false})}
      onPressPause = {() => this.setState({paused: true})}
      onBack = {this.onBack.bind(this)}
      onForward = {this.onForward.bind(this)}
      paused = {this.state.paused}/>
    {video}
  </View>
);
}
}

export default Player;

const styles = {
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
},
audioElement: {
height: 0,
width: 0,
}
};

Можете ли вы добавить код для компонента Player?

Pritish Vaidya 19.09.2018 22:41

@PritishVaidya Я добавил компонент Player

Shawn Nguyen 19.09.2018 22:52

Приведенное ниже решение должно решить вашу проблему, но также проверить экспорт других компонентов. Было бы здорово, если бы вы могли добавить сюда свой код легкая закуска и добавить ссылку на вопрос

Pritish Vaidya 19.09.2018 22:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
1 162
1

Ответы 1

Скорее всего, проблема с вашим компонентом Player или неправильный импорт. Просто попробуйте:

import Player from './PodcastLayers/Player';

Я уже пробовал это, и я получаю ту же ошибку рендеринга, если не помещаю скобки для Player

Shawn Nguyen 19.09.2018 22:51

Другие вопросы по теме