关闭前台运行react-native-track-player的App时偶现崩溃问题求助

开发基于react-native-track-player的App时，关闭App偶尔会触发Android系统提示「App Name keeps stopping」，设备反馈的崩溃日志如下：

Report Type: Crash
Package name: com.myApp

Package version: 1004
Package version name: 1.0.0
Installed by: com.android.vending
Process name: com.myApp
Time: Monday, 3 April 2023
System app: false
System: 
  Device: a02
  Build type: user
  Model: SM-M022G
Product: a02ins
SDK version: 30
Release: 11
Codename: REL
Crash:
  Exception class name: java.lang.NumberFormatException
  Source file: Integer.java
  Source class: java.lang.Integer
  Source method: parseInt
  Line number: 615
  Stack trace: 
    java.lang.numberformatexception: For input string: "null" 
    at java.lang.Integer.parseInt(Integer.java: 615) 
    at java.lang.Integer.parseInt(Integer.java: 650) 
    at com.doublesymmetry.trackplayer.module.MusicModule$q.m(Unknown Source:64)
    at g8.a.e(Unknown Source:11)
    at w8.u0.run(Unknown Source:129)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:246)
    at android.app.Handler.ActivityThread.main(ActivityThread.java:8633)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)
    Suppressed: w8.s0: [b2{Cancelling}@183e27f, Dispatchers.Main]

相关代码如下：

./index.js（PlaybackService注册） #

import {AppRegistry} from 'react-native';
import TrackPlayer from 'react-native-track-player';

import {PlaybackService} from './service';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => PlaybackService);

./service.js（PlaybackService实现） #

import TrackPlayer, {Event} from 'react-native-track-player';

export const PlaybackService = async function () {
  TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
  TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());
};

./App.js（TrackPlayer初始化） #

const track = {
  id: 0,
  url: 'https://streaming.test.net:12345/auto-dj',
  title: 'ShoutCast Stream',
  artist: 'React Native',
  genre: 'ShoutCast Stream',
  artwork: 'https://d33l68.cloudfront.net/5540b349/ecfc9/img/header_logo.svg',
};

const setUpTrackPlayer = async track => {
  try {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.updateOptions({
      stopWithApp: true,
      android: {
        appKilledPlaybackBehavior:
          AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
      },
      capabilities: [Capability.Play, Capability.Pause],
      compactCapabilities: [Capability.Play, Capability.Pause],
    });
    await TrackPlayer.add([track]);
    TrackPlayer.play();
  } catch (err) {
    console.error(`Could not setup track player. ${err}`);
    TrackPlayer.remove();
  }
};

useEffect(() => {
  setUpTrackPlayer(track);

  return () => {
    TrackPlayer.remove();
  };
}, []);

针对崩溃日志中的java.lang.NumberFormatException: For input string: "null"问题，可通过以下步骤修复：

1. 修正Track的ID类型 #

react-native-track-player推荐Track ID使用字符串类型，避免数字ID在App关闭时被原生层误处理为"null"字符串。修改track定义：

const track = {
  id: '0', // 将数字0改为字符串'0'
  url: 'https://streaming.test.net:12345/auto-dj',
  title: 'ShoutCast Stream',
  artist: 'React Native',
  genre: 'ShoutCast Stream',
  artwork: 'https://d33l68.cloudfront.net/5540b349/ecfc9/img/header_logo.svg',
};

2. 完善组件卸载时的异步清理逻辑 #

当前清理函数未处理异步操作，可能导致App关闭时播放器资源未正确释放。改为异步清理流程：

useEffect(() => {
  setUpTrackPlayer(track);

  return async () => {
    try {
      await TrackPlayer.pause(); // 先暂停播放
      await TrackPlayer.reset(); // 重置播放器状态
      await TrackPlayer.destroy(); // 销毁播放器实例
    } catch (err) {
      console.error('清理TrackPlayer失败:', err);
    }
  };
}, []);

3. 优化PlaybackService的事件监听管理 #

添加事件监听器的移除逻辑，避免App关闭时服务仍持有无效引用：

// ./service.js
import TrackPlayer, { Event } from 'react-native-track-player';

export const PlaybackService = async function () {
  // 保存监听器引用
  const playListener = TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
  const pauseListener = TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());

  // 监听服务销毁事件，移除所有监听器
  const destroyListener = TrackPlayer.addEventListener(Event.ServiceDestroy, () => {
    playListener.remove();
    pauseListener.remove();
    destroyListener.remove();
  });
};

4. 修复配置项的导入缺失 #

确保AppKilledPlaybackBehavior已正确导入，避免运行时错误：

// 在App.js顶部补充导入
import TrackPlayer, { Capability, AppKilledPlaybackBehavior } from 'react-native-track-player';

额外建议 #

检查并升级react-native-track-player到最新稳定版，部分旧版本存在原生层解析ID的bug，升级后可避免此类问题。

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