在另一个 function React Native 中传递一个 function

Question

我有以下呈现音频播放器的组件。 冥想列表 function 给了我想要动态播放的文件的位置，音频 function 是播放器的功能。

我想要做的是通过冥想列表返回轨道播放器 url

谢谢

export default class Player extends React.Component<Props> {
  meditationList = () => {
    const adress = this.props.route.params;

    return JSON.stringify(adress.meditation.meditationPlayerAdress);
  };
  audio = () => {
    TrackPlayer.setupPlayer().then(async () => {
      // Adds a track to the queue

      await TrackPlayer.add({
        id: 'trackId',
        url: this.require(meditationList()),
        title: 'Track Title',
        artist: 'Track Artist',
      });

      let trackId = await TrackPlayer.getCurrentTrack();

      // Starts playing it
      TrackPlayer.play();
    });
  };

  pause = () => {
    TrackPlayer.pause();
  };

  stop = () => {
    TrackPlayer.stop();
  };




  render() {
    return (
     ....)}}}

错误图片

Answer 1

嗨，请更改您的代码如下

1. 删除重复的 function
2. url: require('../../../assets/track.mp3')更改为url: this.require(meditationList()),

---

export default class Player extends React.Component<Props> {
  meditationList = () => {
    const adress = this.props.route.params;
    return JSON.stringify(adress.meditation.meditationPlayerAdress);
  };

  audio = () => {
    TrackPlayer.setupPlayer().then(async () => {
      // Adds a track to the queue

      await TrackPlayer.add({
        id: 'trackId',
        url: require(this.meditationList()),
        title: 'Track Title',
        artist: 'Track Artist',
      });

      let trackId = await TrackPlayer.getCurrentTrack();

      // Starts playing it
      TrackPlayer.play();
    });
  };

 pause = () => {
    TrackPlayer.pause();
  };

  stop = () => {
    TrackPlayer.stop();
  };

  render() {
    return (
     ....)}}}