React Native：使用const中的道具

Question

我是新手，反應/反應本地，並試圖構建一個播放本地MP3的簡單應用程序。我正在使用react-native-sound模塊，它似乎工作得很好。

雖然現在，我試圖通過fileName作爲從我的類別道具球員組成。 這似乎是react-native-sound需要我預先加載一個聲音文件。因此，現在我得到以下錯誤：

"Unhandled JS Exception: Cannot read property 'fileName' of undefined".

...  
import Sound from 'react-native-sound'; 

const play = new Sound(this.props.fileName, Sound.MAIN_BUNDLE, (error) => { 
    if (error) { 
    console.log('failed to load the sound', error); 
    } else { // loaded successfully 
    console.log('duration in seconds: ' + play.getDuration() + 
     'number of channels: ' + play.getNumberOfChannels()); 
    } 
}); 

export default class playTrack extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     playing: false, 
     track: this.props.fileName, 
     }; 
    } 

    playTrack() { 
     this.setState({playing: true}) 
     play.play((success) => { 
     if (success) { 
      console.log('successfully finished playing'); 
     } else { 
      console.log('playback failed due to audio decoding errors'); 
     } 
     }) 
    } 
... 

你有任何指針，我如何去了解呢？

Answer 1

您無法以您嘗試使用它的方式從課程外部訪問班級實例的this。相反，在構造函數中創建Sound：

import Sound from 'react-native-sound'; 

export default class playTrack extends Component { 
    constructor(props) { 
     super(props); 

     this.play = new Sound(props.fileName, Sound.MAIN_BUNDLE, (error) = > { 
      if (error) { 
       console.log('failed to load the sound', error); 
      } else { // loaded successfully 
       console.log('duration in seconds: ' + this.play.getDuration() + 
        'number of channels: ' + this.play.getNumberOfChannels()); 
      } 
     }); 

     this.state = { 
      playing: false, 
      track: this.props.fileName, 
     }; 
    } 

    playTrack() { 
     this.setState({ 
      playing: true 
     }) 
     this.play.play((success) = > { 
      if (success) { 
       console.log('successfully finished playing'); 
      } else { 
       console.log('playback failed due to audio decoding errors'); 
      } 
     }) 
    }