React Native类外部无法访问props：Audio组件加载Firebase音频URL报错求助

嘿，我来帮你搞定这个问题！你遇到的报错核心原因很明确：在类外部定义track的时候，组件还没被实例化，this根本不是指向Audio组件的实例，自然拿不到this.props。props只有在组件完成挂载后，在类的内部方法（比如生命周期、render）里才能正常访问。

具体解决步骤 #

这里给你几个关键的修改方向：

• 把音频实例track改成组件的实例属性（比如this.track），而不是全局变量，这样组件内部的方法都能方便访问。
• 把音频的初始化逻辑移到componentDidMount生命周期方法里，这时候组件已经挂载，this.props.sUrl可以正常获取。
• 记得在组件卸载时清理音频资源，避免内存泄漏（比如在componentWillUnmount里调用release()方法）。

修改后的完整代码 #

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import Sound from 'react-native-sound'

export default class Audio extends Component<{}> {
  state = {
    bDownloaded: true,
    bDownloading: false,
    bPlaying: false
  };

  // 初始化音频实例为组件属性
  track = null;

  componentDidMount() {
    // 在组件挂载后初始化音频，此时this.props可以正常访问
    this.track = new Sound(this.props.sUrl, null, (e) => {
      if (e) {
        this.track = null;
        console.log('error loading track:', e);
        // 加载失败时更新状态，反馈给用户
        this.setState({ bDownloaded: false });
      } else {
        // 加载成功后确认状态
        this.setState({ bDownloaded: true });
      }
    });
  }

  componentWillUnmount() {
    // 组件卸载时释放音频资源，防止内存泄漏
    if (this.track) {
      this.track.release();
      this.track = null;
    }
  }

  playPauseTrack() {
    // 增加音频实例的判断，避免加载失败时触发报错
    if (this.state.bDownloaded && this.track) {
      if (!this.state.bPlaying) {
        this.setState({ bPlaying: true });
        this.track.play();
      } else {
        this.setState({ bPlaying: false });
        this.track.pause();
      }
    }
  }

  render() {
    let sImg;
    if (this.state.bDownloaded) {
      sImg = this.state.bPlaying 
        ? require('../../../../../images/pause.png') 
        : require('../../../../../images/play.png');
    } else {
      // 加载失败时可以隐藏按钮或显示错误图标
      sImg = null;
    }

    return (
      <View style={styles.container}>
        {sImg && (
          <TouchableOpacity activeOpacity={0.8} onPress={() => this.playPauseTrack()}>
            <Image style={{ height: 36, width: 36, resizeMode: 'contain' }} source={sImg} />
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 16,
  },
});

额外说明 #

• 我在代码里加了加载失败时的状态更新，这样可以更好地反馈给用户音频的加载状态。
• 在playPauseTrack里加了this.track的判断，避免音频加载失败时调用play/pause导致报错。
• 组件卸载时的资源清理很重要，不然可能会导致内存泄漏或者音频在后台继续播放的问题。

内容的提问来源于stack exchange，提问作者Diego Bittencourt