reactjs - 资源音频文件无法在 Expo 中播放

Question

import AlphService from './AlphService';

export default class MyClass extends React.Component {
 alphService;
 constructor(props) {
  super(props);
  alphService = new AlphService();
  this.state = alphService.getState();
 }
 componentWillMount() {
    this.play(this.state.sound);
  }

  play(source) {
   console.log(source);
   Audio.setIsEnabledAsync(true);
   const sound = new Audio.Sound();
   const play_sound = (async () => {
    await sound.loadAsync(require(source)); //Error Here
    await sound.playAsync();
   })();
  }
}

AlphService.js

export default class alphService {
 stateObj = {
  sound: ""
 };
 getState(){
  this.stateObj.sound = "../assets/sounds/c.mp3"; 
  return this.stateObj;
 }
}

ERROR: components/Alphabet.js:Invalid call at line 51: require(source)

也尝试一下我从 getState() 方法返回 require(soundPathVar) 对象，并从 play() 中删除 required，然后出现同样的错误。

我是 react 原生的初学者，我想尝试创建动态声音文件路径。所以如果我做错了，你能帮助我吗？提前致谢。

Answer 1

当我尝试 require 动态图像时，我遇到了这个问题，结果 require 只接受特定源，甚至 require("SOURCE/"+ "Something.png") 不起作用，应该是 require("SOURCE/something.png")。试试这个:

export default class alphService {
 stateObj = {
  sound: ""
 };
 getState(){
  this.stateObj.sound = require("../assets/sounds/c.mp3"); 
  return this.stateObj;
 }
}

您可以创建一个包含所有路径的 json 文件并像这样使用它:

export default const paths = {
    file1: require("path/to/file1.png"),
    file2: require("path/to/file2.png")
}

然后在您的组件中导入此路径文件并像这样使用它(例如图像):

<Image source={paths.file1}/>