Question

我正在使用react-native-track-player制作音乐应用。我制作了3个类，分别为Clusters，Songlist和Play类。

屏幕的工作方式

Clusters类-> Songlist类-> Play类。当我将道具从Songlist类传递到Play类时，从Songlist到Play的问题对我来说是问题，可能会出现错误，可能会导致未处理的承诺被拒绝并且歌曲无法播放。我创建了数据。第一个屏幕显示标题和心情（Songlist类）。第二个屏幕（Songlist根据所单击的标题显示播放列表。然后，第三个屏幕（Play）是我尝试传递道具后出现错误的地方。

这是我将data保存到另一个文件中的地方

const ClusterData = [
{ title: 'Cluster1', 
data: 
[
  {name: 'passionate'},
  {name: 'rousing'},
  {name: 'confident'},
  {name: 'boisterous'},
  {name: 'rowdy'}
],
 songlist:
[
  {
    id: '2222',
    url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
    title: 'Better Now',
    artist: 'Post Malone',
  },
  {
    id: '2',
    url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',
    title: 'YoungBlood',
    artist: '5SOS',
  },
]
},
{ title: 'Cluster2', 
  data: 
[
  {name: 'rollicking'},
  {name: 'cheerful'},
  {name: 'fun'},
  {name: 'sweet'},
  {name: 'amiable'},
  {name: 'natured'}
],
  songlist:
  [
    {
      id: '1111',
      url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',
      title: 'Summertime',
      artist: 'Yellow Claw',
    },
    {
      id: '1',
      url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
      title: 'Despacito',
      artist: 'Luis Fonsi',
    },
  ]
},

这是我的Clusters屏幕（第一个屏幕）

export default class Clusters extends Component{
 render(){
  return(
      <View style={styles.container}>
          <SectionList          
           renderItem={({item,index})=>{
               return(
              <SectionListItem  item={item} index={index}> </SectionListItem>);}} 
                  renderSectionHeader={({ section }) => {
                      return (<SectionHeader section={section} />);}}
                        sections={ClusterData}
                        keyExtractor={(item, index) => item.name}>
          </SectionList>
      </View>      
  );
}}
class SectionHeader extends Component {
  render() {
      return (
          <View style={styles.header}>  
              <Text style={styles.headertext}>
              {this.props.section.title}       
              </Text>
              <TouchableOpacity onPress={ () => Actions.SongList({ section: this.props.section}) }>
                <Text style ={styles.Play}> Play
                </Text>
                </TouchableOpacity>
          </View>
      );
  }}

class SectionListItem extends Component{
  render(){
      return(
          <View>
          <Text style={styles.moodname}>{this.props.item.name}</Text>
          </View>
      );
  }
}

这是我的SongList屏幕（第二屏幕）

export default class App extends Component {
render() {
return (
    <View>
    <FlatList

    data={this.props.section.songlist}
    renderItem={({item,index,rowId})=>{
        return(
            <FlatListItem  item={item} index={index}>
            </FlatListItem>);}}>
    </FlatList>
    </View>
);}}
class FlatListItem extends Component{
 render(){
    return(
        <View>
            <TouchableOpacity onPress={ () => Actions.Play({songlist: this.props.item.songlist, item: this.props.item}) }>
        <Text style={styles.itemTitle}>{this.props.item.songtitle}</Text>
        <Text style={styles.itemArtist}>{this.props.item.artist}</Text>
            </TouchableOpacity>
        </View>
    );}}

因此，当我单击歌曲标题/歌手时，该应用程序将停止。我认为错误可能是await TrackPlayer.add(this.props.item.songlist[index]);，但我不确定。

这是我的Play屏幕

import TrackPlayer from 'react-native-track-player';

export default class Play extends Component{
componentDidMount()
{
    TrackPlayer.setupPlayer().then(async () => {  
        // Adds a track to the queue
        await TrackPlayer.add(this.props.item.songlist[index]);
        // Starts playing it
        TrackPlayer.play();  
    });
}
  onPressPlay = () => {
      TrackPlayer.play();
  };
onPressPause = () => {
      TrackPlayer.pause();
  };
render() {
return (
    <View style={styles.container}>
      <View style= {{flexDirection :'column'}}>
      <TouchableOpacity style= {styles.play} onPress = {this.onPressPlay}>
          <Text style = {{fontWeight:'bold',textAlign:'center',color:'white'}}>Play</Text>
      </TouchableOpacity>
      <TouchableOpacity style= {styles.pause} onPress = {this.onPressPause}>
          <Text style = {{fontWeight:'bold',textAlign:'center',color:'white'}}>Pause</Text>
      </TouchableOpacity>        
        </View>
      </View>
  );}}

Answer 1

TrackPlayer.setupPlayer().then(async () => {  
        // Adds a track to the queue
        await TrackPlayer.add(this.props.item.songlist[index])
        // Starts playing it
        TrackPlayer.play();  
    });

变量index未定义，这就是您的应用停止的原因

反应本地初始化索引以传递道具

1 个答案: