反應本地道具

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中傳遞了錯誤的道具，因為該項目本身就是一個歌曲列表項，所以現在沒有歌曲列表對象，因此只需像Actions.Play({songIndex: 0, item: this.props.item}) }>和Update這樣傳遞它在Play類中，將this.props.item.songlist替換為this.props.item

以下是完整的工作示例

import React, { Component } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  SectionList,
} from 'react-native';

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

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',
      },
    ],
  },
];

export class MusicPlayer extends Component {
  state = {
    showSongList: false,
    activeSection: null,
  };

  updateState = item => {
    this.setState(item);
  };

  render() {
    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        {this.state.showSongList ? (
          <SongList section={this.state.activeSection} />
        ) : (
          <SectionList
            renderItem={({ item, index }) => {
              return <SectionListItem item={item} index={index} />;
            }}
            renderSectionHeader={({ section }) => {
              return (
                <SectionHeader
                  section={section}
                  updateState={this.updateState}
                />
              );
            }}
            sections={ClusterData}
            keyExtractor={(item, index) => item.name}
          />
        )}
      </View>
    );
  }
}
class SectionHeader extends Component {
  render() {
    return (
      <View style={{ margin: 20, marginBottom: 10 }}>
        <Text style={{ fontWeight: 'bold' }}>{this.props.section.title}</Text>
        <TouchableOpacity
          onPress={() =>
            this.props.updateState({
              showSongList: true,
              activeSection: this.props.section,
            })
          }
        >
          <Text style={{ color: 'blue' }}> Play</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class SectionListItem extends Component {
  render() {
    return (
      <View>
        <Text style={{ margin: 5, marginLeft: 20, fontStyle: 'italic' }}>
          {this.props.item.name}
        </Text>
      </View>
    );
  }
}
export class SongList extends Component {
  state = {
    isPlayActive: false,
  };

  startPlay = data => {
    this.setState({
      isPlayActive: true,
      data: data,
    });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.props.section.songlist}
          renderItem={({ item, index, rowId }) => {
            return (
              <FlatListItem
                item={item}
                index={index}
                startPlay={this.startPlay}
              />
            );
          }}
        />
        {this.state.isPlayActive && <Play {...this.state.data} />}
      </View>
    );
  }
}
class FlatListItem extends Component {
  render() {
    return (
      <View style={{ backgroundColor: '#555', height: 80, marginTop: 20 }}>
        <TouchableOpacity
          onPress={() =>
            this.props.startPlay({
              songIndex: 0,
              item: this.props.item,
            })
          }
        >
          <Text
            style={{
              paddingTop: 10,
              textAlign: 'center',
              fontSize: 20,
              color: '#FFF',
            }}
          >
            {this.props.item.title}
          </Text>
          <Text
            style={{
              textAlign: 'center',
              fontSize: 15,
              paddingTop: 10,
              color: '#FFF',
            }}
          >
            {this.props.item.artist}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export class Play extends Component {
  componentDidMount() {
    TrackPlayer.setupPlayer().then(async () => {
      // Adds a track to the queue
      await TrackPlayer.add(this.props.item);
      // Starts playing it
      TrackPlayer.play();
    });
  }
  onPressPlay = () => {
    TrackPlayer.play();
  };
  onPressPause = () => {
    TrackPlayer.pause();
  };
  render() {
    return (
      <View style={{ height: 400 }}>
        <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity
            style={{
              backgroundColor: '#f0f0f0',
              height: 40,
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              marginRight: 10,
            }}
            onPress={this.onPressPlay}
          >
            <Text
              style={{
                fontWeight: 'bold',
                textAlign: 'center',
                color: 'black',
              }}
            >
              Play
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 1,
              backgroundColor: '#f0f0f0',
              height: 40,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={this.onPressPause}
          >
            <Text
              style={{
                fontWeight: 'bold',
                textAlign: 'center',
                color: 'black',
              }}
            >
              Pause
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}