React Native应用添加录音功能报错：null is not an object

我在React Native应用中开发语音笔记功能，计划通过POST接口将录制的音频发送到Django后端。使用react-native-audio-recorder-player库实现录制和播放，用TouchableOpacity创建了「开始录制」「停止录制」「播放音频」三个按钮，但调用对应方法时触发以下错误：

[00:09:51] null is not an object (evaluating 'RNAudioRecorderPlayer.startPlayer')
at node_modules\react-native-audio-recorder-player\index.ts:null in AudioRecorderPlayer#startPlayer
at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in asyncGeneratorStep
at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in _next
at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in Promise$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in Promise
at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in <anonymous>
at node_modules\react-native-audio-recorder-player\index.ts:null in AudioRecorderPlayer

我的代码实现如下：

组件外部创建实例：

const audioRecorderPlayer = new AudioRecorderPlayer();

录制相关函数：

const startRecording = async () => {
    try {
      const path = await audioRecorderPlayer.startRecorder();
      audioRecorderPlayer.addRecordBackListener((e) => {
      this.setState({
        recordSecs: e.currentPosition,
        recordTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
      })
    })
      setAudioPath(path);
      console.log(path)
  } catch (error) {
    console.error(error);
  }
}

const stopRecording = async () => {
    try {
      const path = await audioRecorderPlayer.stopRecorder();
      audioRecorderPlayer.removeRecordBackListener((e) => {
        this.setState({
          recordSecs: 0,
        })
      })
      setAudioPath(path);
      console.log(path)
    } catch (error) {
      console.error(error);
    }
}

const playRecording = async () => {
    try {
      await audioRecorderPlayer.startPlayer(audioPath);
    } catch (error) {
      console.error(error);
    }
};

问题原因及解决办法 #

这个错误的核心原因是原生模块未正确链接或安装不完整，以下是分步排查和修复方案：

1. 重新安装并验证库链接 #

• 先卸载现有库：

  npm uninstall react-native-audio-recorder-player
  

• 重新安装：

  npm install react-native-audio-recorder-player
  

• React Native 0.60+支持自动链接，旧版本需手动执行：

  react-native link react-native-audio-recorder-player
  

2. 检查iOS原生配置 #

• 打开Xcode项目，确认RNAudioRecorderPlayer.xcodeproj已添加到Libraries目录
• 进入Build Phases -> Link Binary With Libraries，确保包含libRNAudioRecorderPlayer.a
• 在Info.plist中添加麦克风权限声明：

  <key>NSMicrophoneUsageDescription</key>
  <string>需要访问麦克风进行语音录制</string>
  

3. 检查Android原生配置 #

• 打开android/app/src/main/AndroidManifest.xml，添加必要权限：

  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

• 确认android/settings.gradle包含：

  include ':react-native-audio-recorder-player'
  project(':react-native-audio-recorder-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio-recorder-player/android')
  

• 检查android/app/build.gradle的dependencies块：

  implementation project(':react-native-audio-recorder-player')
  

4. 清除缓存并重启服务 #

• 关闭Metro，清除缓存后重启：

  npx react-native start --reset-cache
  

• 重新运行项目：

  # Android
  npx react-native run-android
  # iOS
  npx react-native run-ios
  

5. 修正代码中的混用问题 #

• 你在函数式组件中混用了类组件的this.setState和函数式钩子setAudioPath，需统一使用状态钩子：

  // 顶部声明状态
  const [recordSecs, setRecordSecs] = useState(0);
  const [recordTime, setRecordTime] = useState('');
  
  // startRecording中修改回调
  audioRecorderPlayer.addRecordBackListener((e) => {
    setRecordSecs(e.currentPosition);
    setRecordTime(audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)));
  })
  

• removeRecordBackListener无需传参，直接调用即可：

  audioRecorderPlayer.removeRecordBackListener();
  

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