Question

我是React Native的新手。我正在制作一个音乐应用，并且正在使用有效的react-native-track-player模块。但是现在，我正在尝试将songlist作为道具从我的Flatlist传递到播放器组件。

所以首先，我能够表现出情绪。然后，当我通过道具/移动到Songlist屏幕时，我可以显示歌曲列表，并且它将在Flatlist中显示标题和艺术家。因此，当我单击其中之一时，它将转到Play屏幕。我希望能够传递道具并播放歌曲。但是歌曲不会播放并崩溃。我不确定我是否正确传递了道具。如果有人可以帮助我解决这个问题，我将不胜感激。

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

export default class Cluster1 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({songIndex: 0, 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);，但我不确定。

这是我的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);
        // 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>
  );}}

这是我将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',
    },
  ]
},

Answer 1

您在 FlatListItem 中传递了错误的道具，因为 item 本身是一个歌曲列表项，所以现在没有歌曲列表对象，因此，只需像这样open()一样传递它，并通过将fdopen()替换为Actions.Play({songIndex: 0, item: this.props.item}) }>

在 Play 类中进行更新

下面是完整的工作示例

this.props.item.songlist

反应本地道具

1 个答案: