javascript - 查看 'PodCastScreen' React Native的render方法

Question

我正在使用 React Native 构建一个播放器应用程序，但弹出此错误。我从来没有见过这个错误。我尝试清除缓存并检查我的导入和导出。

第一组代码来自 PodCastScreen 组件，第二组代码来自播放器组件。

这是我的代码:

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.log(totalLength);
this.setState({totalLength: Math.floor(data.duration)});
}

setTime(data) {
//console.log(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,
}
};

Answer 1

很可能是您的播放器组件有问题或导入不正确。尝试一下:

import Player from './PodcastLayers/Player';