React Native TrackPlayer播放状态类型不匹配报错求助

问题根源 #

usePlaybackState 返回的不是直接的 State 枚举值，而是一个结构为 { state: State | undefined } 的对象（组件初始加载时，state 可能为 undefined）。你直接将这个对象当作 State 类型使用，导致了类型不兼容错误。

修复步骤 #

1. 正确提取播放状态值 #

从 usePlaybackState 返回的对象中取出实际的 state 属性，单独处理：

const playbackStateObj = usePlaybackState();
const currentState = playbackStateObj.state;

2. 调整函数参数类型与逻辑 #

修改 togglePlayback 函数，适配 State | undefined 类型的参数，并增加空值判断：

const togglePlayback = async (playback?: State) => {
  const currentTrack = await TrackPlayer.getActiveTrack();
  // 同时校验当前曲目存在且播放状态有效
  if (currentTrack !== null && playback) {
    if (playback === State.Paused || playback === State.Ready) {
      await TrackPlayer.play();
    } else {
      await TrackPlayer.pause();
    }
  }
};

3. 修正组件调用逻辑 #

在调用 togglePlayback 和判断图标时，使用提取出的 currentState 而非原对象：

<Pressable onPress={() => togglePlayback(currentState)}>
  <Icon
    style={[styles.icon, styles.playButton]}
    name={currentState === State.Playing ? "pause" : "play"}
    size={75}
  />
</Pressable>

完整修复后代码 #

import React, { useState } from 'react'
import { View, StyleSheet, Pressable} from 'react-native'
import TrackPlayer, { State , usePlaybackState } from 'react-native-track-player';
import Icon from 'react-native-vector-icons/FontAwesome';

const ControlCenter = () => {
  // 提取实际的播放状态值
  const playbackStateObj = usePlaybackState();
  const currentState = playbackStateObj.state;

  const skipToNext = async () => {
    await TrackPlayer.skipToNext()
  }
  const skipToPrevious = async () => {
    await TrackPlayer.skipToPrevious()
  }

  const togglePlayback = async (playback?: State) => {
    const currentTrack = await TrackPlayer.getActiveTrack();
    if (currentTrack !== null && playback) {
      if (playback === State.Paused || playback === State.Ready) {
        await TrackPlayer.play()
      } else {
        await TrackPlayer.pause();
      }
    }
  };

  const [bgColor, setBgColor] = useState("#ff0000")
  
  return (
    <View style={[styles.container, { backgroundColor: `${bgColor}` }]}>
      <Pressable onPress={skipToPrevious}>
        <Icon style={styles.icon} name="step-backward" size={40} />
      </Pressable>
      <Pressable onPress={() => togglePlayback(currentState)}>
        <Icon
          style={[styles.icon, styles.playButton]}
          name={currentState === State.Playing ? "pause" : "play"}
          size={75}
        />
      </Pressable>
      <Pressable onPress={skipToNext}>
        <Icon style={styles.icon} name="step-forward" size={40} color="#900" />
      </Pressable>
    </View>
  )
}

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