Javascript 本机音频播放器中的传递功能

我正在尝试根据名为冥想列表的函数动态播放声音。函数的返回为我提供了在播放器中工作的正确路径

但是，如果调用URL上的函数不起作用，则会出现以下错误：拒绝，找不到变量冥想列表。我还尝试使用JSON.stringify来返回address.冥想.冥想PlayerAddress，但没有成功

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

    return adress.meditation.meditationPlayerAdress; //console.log returns ../../assets/track1.mp3
  };

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

      await TrackPlayer.add({
        id: 'trackId',
        url: require('../../assets/track1.mp3'), // this.require(meditationList())- warning that variable meditationList cannot be found
        title: 'Track Title',
        artist: 'Track Artist',
      });

      let trackId = await TrackPlayer.getCurrentTrack();

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

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

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

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{alignItems: 'center'}}>
          <View style={{alignItems: 'center', marginTop: 24}}>
            <Text style={[styles.textLight, {fontSize: 12}]} />

            <Text
              style={[
                styles.text,
                {fontSize: 15, fontWeight: '500', marginTop: 8},
              ]}>
              {this.meditationList()}
            </Text>
          </View>

          <View style={styles.coverContainer}>
            <Image
              source={require('../../../assets/coverArt.jpg')}
              style={styles.cover}
            />
          </View>

          <View style={{alignItems: 'center', marginTop: 32}}>
            <Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
              Exhale
            </Text>
            <Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>sal</Text>
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 16,
          }}>
          <TouchableOpacity onPress={this.stop}>
            <FontAwesomeIcon icon={faStop} size={32} color="#93A8B3" />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.playButtonContainer}
            onPress={this.audio}>
            <FontAwesomeIcon
              name="play"
              icon={faPlay}
              size={32}
              color="#3D425C"
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={this.pause}>
            <FontAwesomeIcon icon={faPause} size={32} color="#93A8B3" />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

导出默认类Player扩展React.Component{
冥想列表=（）=>{
常量地址=this.props.route.params；
return address.冥想.冥想PlayerAddress；//console.log返回.././assets/track1.mp3
};
音频=（）=>{
TrackPlayer.setupPlayer（）。然后（异步（）=>{
//将轨迹添加到队列中
等待TrackPlayer.add({
id:'trackId'，
url:require（'../../assets/track1.mp3'），//this.require（冥想列表（））-警告找不到变量冥想列表
标题：“曲目标题”，
艺术家：“轨迹艺术家”，
});
让trackId=wait TrackPlayer.getCurrentTrack（）；
//开始演奏
TrackPlayer.play（）；
});
};
暂停=（）=>{
TrackPlayer.pause（）；
};
停止=（）=>{
TrackPlayer.stop（）；
};
render（）{
返回(
{this.冥想列表（）}
呼气
萨尔
);
}
}
无法找到冥想列表解决方案：

当您使用
基于类的组件时，其中定义的任何内容都可以通过
this访问。定义的任何内容都可以访问，但不能直接访问，因此这里我们需要
this.冥想列表（）

您可以在基于功能的组件中使用
冥想列表（）
，而不会出错


require（var）将不接受动态变量

不能在require中使用变量。所有需求必须是静态分析的。这意味着您必须始终写入require（'/path/to/file'）

const IMAGES = {
  image1: require('../image1'), // statically analyzed
  image2: require('../image2'), // statically analyzed
}

getImage(num: number) { // dynamically invoked
  return IMAGES['image' + num];
}


但是，您可以这样做，

const IMAGES = {
  image1: require('../image1'), // statically analyzed
  image2: require('../image2'), // statically analyzed
}

getImage(num: number) { // dynamically invoked
  return IMAGES['image' + num];
}

无法找到冥想列表解决方案：

当您使用
基于类的组件时，其中定义的任何内容都可以通过
this访问。定义的任何内容都可以访问，但不能直接访问，因此这里我们需要
this.冥想列表（）

您可以在基于功能的组件中使用
冥想列表（）
，而不会出错


require（var）将不接受动态变量

不能在require中使用变量。所有需求必须是静态分析的。这意味着您必须始终写入require（'/path/to/file'）

const IMAGES = {
  image1: require('../image1'), // statically analyzed
  image2: require('../image2'), // statically analyzed
}

getImage(num: number) { // dynamically invoked
  return IMAGES['image' + num];
}


但是，您可以这样做，

const IMAGES = {
  image1: require('../image1'), // statically analyzed
  image2: require('../image2'), // statically analyzed
}

getImage(num: number) { // dynamically invoked
  return IMAGES['image' + num];
}

对于每个遇到这个问题的人。我找不到一个简单的解决办法，但我找到了一个非常方便的方法

考虑到应用程序无法将所有音频文件存储在本地存储中（尤其是大型应用程序），我决定将URL路径设置为音频链接，从而解决了“必需”的问题

现在，我的代码看起来像这样，并且工作得非常完美

meditationList = () => {
    const adress = this.props.route.params;

    return adress.meditation.meditationPlayerAdress; //returns a URL link now 
  };
audio = () => {

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

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

对于每个遇到这个问题的人。我找不到一个简单的解决办法，但我找到了一个非常方便的方法

考虑到应用程序无法将所有音频文件存储在本地存储中（尤其是大型应用程序），我决定将URL路径设置为音频链接，从而解决了“必需”的问题

现在，我的代码看起来像这样，并且工作得非常完美

meditationList = () => {
    const adress = this.props.route.params;

    return adress.meditation.meditationPlayerAdress; //returns a URL link now 
  };
audio = () => {

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

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

现在我得到了以下错误：转换错误：转换错误在第38行无效调用require（_this.冥想列表（））@Obsesie，请检查更新的答案，尝试那样做是。。我在url行的无效调用中遇到了相同的错误。@Obsesie，再次更新，您可能在某个地方丢失了此上下文，或者
冥想列表
有问题，请尝试
console.log（url）
也在更新的codeconst url=this.冥想列表（）中；console.log（url）；我在声明我得到正确路径后直接调用--../../assets/track1.mp3现在我得到以下错误：转换错误：转换错误第38行的无效调用require（_this.冥想列表（））@Obsesie，请检查更新的答案，尝试那样做是。。我在url行的无效调用中遇到了相同的错误。@Obsesie，再次更新，您可能在某个地方丢失了此上下文，或者
冥想列表
有问题，请尝试
console.log（url）
也在更新的codeconst url=this.冥想列表（）中；console.log（url）；我在声明找到正确的路径后直接打电话--../../assets/track1.mp3