Question

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

屏幕的工作方式

Clusters组件-> Songlist组件-> Play组件。我遇到的问题是，我不知道如何将所选歌曲的索引从SongList组件传递到Clusters组件，这也将使我将其传递给我的Play组件。我不确定该怎么做。

我创建了数据。第一个屏幕显示标题和心情（Songlist组件）。第二个屏幕（Songlist根据我单击的标题显示播放列表。

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

这是我的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

只需尝试传递一个函数作为可以在子级中调用的道具

function setSong(var selectedSong){
 // do something with the selectedsong, maybe in the state
  this.setState({currentSong: selectedSong});
}

然后传递此功能

 <TouchableOpacity
          onPress={() =>
            Actions.Play({
              songlist: this.props.item.songlist,
              item: this.props.item,
              setSong: () => this.setSong 
            })
          }
        >

Answer 2

export default class App extends Component { 

 setSong(var selectedSong){
 // do something with the selectedsong, maybe in the state
  this.setState({currentSong: selectedSong});
}

  render() {
    return (
      <View>
        <FlatList
          data={this.props.section.songlist}
          renderItem={({ item, index, rowId }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

Answer 3

您需要这样的东西

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

React Native Pass索引

3 个答案: