Reactjs 如何将功能组件转换为类组件？

这是我想要使用的功能组件示例

（）

如何将其转换为类组件

import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import TrackPlayer from "react-native-track-player";

import Player from "../components/Player";
import playlistData from "../data/playlist.json";
import localTrack from "../resources/pure.m4a";

export default function LandingScreen() {
  const playbackState = TrackPlayer.usePlaybackState();

  useEffect(() => {
    TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
      stopWithApp: false,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
        TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
        TrackPlayer.CAPABILITY_STOP
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ]
    });
  }, []);

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add(playlistData);
      await TrackPlayer.add({
        id: "local-track",
        url: localTrack,
        title: "Pure (Demo)",
        artist: "David Chavez",
        artwork: "https://picsum.photos/200"
      });
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.description}>
        We'll be inserting a playlist into the library loaded from
        `playlist.json`. We'll also be using the `ProgressComponent` which
        allows us to track playback time.
      </Text>
      <Player
        onNext={skipToNext}
        style={styles.player}
        onPrevious={skipToPrevious}
        onTogglePlayback={togglePlayback}
      />
      <Text style={styles.state}>{getStateName(playbackState)}</Text>
    </View>
  );
}

LandingScreen.navigationOptions = {
  title: "Playlist Example"
};

function getStateName(state) {
  switch (state) {
    case TrackPlayer.STATE_NONE:
      return "None";
    case TrackPlayer.STATE_PLAYING:
      return "Playing";
    case TrackPlayer.STATE_PAUSED:
      return "Paused";
    case TrackPlayer.STATE_STOPPED:
      return "Stopped";
    case TrackPlayer.STATE_BUFFERING:
      return "Buffering";
  }
}

async function skipToNext() {
  try {
    await TrackPlayer.skipToNext();
  } catch (_) {}
}

async function skipToPrevious() {
  try {
    await TrackPlayer.skipToPrevious();
  } catch (_) {}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  description: {
    width: "80%",
    marginTop: 20,
    textAlign: "center"
  },
  player: {
    marginTop: 40
  },
  state: {
    marginTop: 20
  }
});

import React，{useffect}来自“React”；
从“react native”导入{样式表、文本、视图}；
从“react native track player”导入TrackPlayer；
从“./组件/播放器”导入播放器；
从“./data/playlist.json”导入播放数据；
从“./resources/pure.m4a”导入localTrack；
导出默认函数LandingScreen（）{
const playbackState=TrackPlayer.usePlaybackState（）；
useffect（（）=>{
TrackPlayer.setupPlayer（）；
TrackPlayer.updateOptions({
stopWithApp:false，
能力：[
TrackPlayer.CAPABILITY\u播放，
TrackPlayer.CAPABILITY\u暂停，
TrackPlayer.CAPABILITY\u跳到下一步，
TrackPlayer.CAPABILITY\u跳到上一个，
TrackPlayer.u停止
],
紧凑型功能：[
TrackPlayer.CAPABILITY\u播放，
TrackPlayer.CAPABILITY\u暂停
]
});
}, []);
异步函数togglePlayback（）{
const currentTrack=wait TrackPlayer.getCurrentTrack（）；
如果（currentTrack==null）{
等待TrackPlayer.reset（）；
等待TrackPlayer。添加（播放数据）；
等待TrackPlayer.add({
id:“本地轨道”，
url:localTrack，
标题：“纯（演示）”，
艺术家：“大卫·查韦斯”，
艺术品：“https://picsum.photos/200"
});
等待TrackPlayer.play（）；
}否则{
if（playbackState===TrackPlayer.STATE_暂停）{
等待TrackPlayer.play（）；
}否则{
等待TrackPlayer。暂停（）；
}
}
}
返回(
我们将向从加载的库中插入播放列表
`playlist.json`。我们还将使用'ProgressComponent'，它
允许我们跟踪播放时间。
{getStateName（playbackState）}
);
}
着陆屏幕。导航选项={
标题：“播放列表示例”
};
函数getStateName（状态）{
开关（状态）{
case TrackPlayer.STATE\u无：
返回“无”；
case TrackPlayer.STATE_播放：
返回“播放”；
case TrackPlayer.STATE_已暂停：
返回“暂停”；
case TrackPlayer.STATE_已停止：
返回“停止”；
case TrackPlayer.STATE_缓冲：
返回“缓冲”；
}
}
异步函数skipToNext（）{
试一试{
等待TrackPlayer.skipToNext（）；
}捕获（{}
}
异步函数skipToPrevious（）{
试一试{
等待TrackPlayer.skipToPrevious（）；
}捕获（{}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“中心”，
背景颜色：“F5FCFF”
},
说明：{
宽度：“80%”，
玛金托普：20，
textAlign：“居中”
},
玩家：{
玛金托普：40
},
声明：{
玛金托普：20
}
});

我试着如下。但它给了我错误

import React, { Component, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Player from './Player'
import TrackPlayer from 'react-native-track-player';

// const playbackState = TrackPlayer.usePlaybackState();  // I don't know how to manage this.

export default class MusicPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      full: true,
      clicked: '',
    };
  }

  componentWillMount() {
    TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
      stopWithApp: false,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
        TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
        TrackPlayer.CAPABILITY_STOP
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ]
    });
  }

  async togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add(playlistData);
      await TrackPlayer.add({
        id: "local-track",
        url: 'http://192.168.22.27:8000/' + this.props.navigation.getParam('clickedSource'),
        title: "Pure (Demo)",
        artist: "David Chavez",
        artwork: "https://picsum.photos/200"
      });
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

  async skipToNext() {
    try {
      await TrackPlayer.skipToNext();
    } catch (_) { }
  }

  async skipToPrevious() {
    try {
      await TrackPlayer.skipToPrevious();
    } catch (_) { }
  }

  render() {
    return (
      <View style={styles.container} >
        <Player
          onNext={()=>this.skipToNext()}
          style={styles.player}
          onPrevious={()=>this.skipToPrevious()}
          onTogglePlayback={()=>this.togglePlayback()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  player: {
    marginTop: 40
  },
});

import React，{Component，useffect}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity、维度、图像、异步存储}；
从“反应本机矢量图标/AntDesign”导入图标；
从“./Player”导入播放器
从“react native track player”导入TrackPlayer；
//const playbackState=TrackPlayer.usePlaybackState（）；//我不知道该怎么办。
导出默认类MusicLayer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
完全正确，
单击：“”，
};
}
组件willmount（）{
TrackPlayer.setupPlayer（）；
TrackPlayer.updateOptions({
stopWithApp:false，
能力：[
TrackPlayer.CAPABILITY\u播放，
TrackPlayer.CAPABILITY\u暂停，
TrackPlayer.CAPABILITY\u跳到下一步，
TrackPlayer.CAPABILITY\u跳到上一个，
TrackPlayer.u停止
],
紧凑型功能：[
TrackPlayer.CAPABILITY\u播放，
TrackPlayer.CAPABILITY\u暂停
]
});
}
异步切换播放（）{
const currentTrack=wait TrackPlayer.getCurrentTrack（）；
如果（currentTrack==null）{
等待TrackPlayer.reset（）；
等待TrackPlayer。添加（播放数据）；
等待TrackPlayer.add({
id:“本地轨道”，
网址：'http://192.168.22.27:8000/“+this.props.navigation.getParam（'clickedSource'），
标题：“纯（演示）”，
艺术家：“大卫·查韦斯”，
艺术品：“https://picsum.photos/200"
});
等待TrackPlayer.play（）；
}否则{
if（playbackState===TrackPlayer.STATE_暂停）{
等待TrackPlayer.play（）；
}否则{
等待TrackPlayer。暂停（）；
}
}
}
异步skipToNext（）{
试一试{
等待TrackPlayer.skipToNext（）；
}捕获（{}
}
异步skipToPrevious（）{
试一试{
等待TrackPlayer.skipToPrevious（）；
}捕获（{}
}
render（）{
返回(
this.skipToNext（）}
style={style.player}
onPrevious={（）=>this.skipToPrevious（）}
onTogglePlayback={（）=>this.togglePlayback（）}
/>
);
}
}
const styles=StyleSheet.create({
玩家：{
玛金托普：40
},
});

---

如何将其转换为类组件？

usePlaybackState

是一个react钩子，但似乎存在一个返回承诺的函数。您不想存储此状态对象，因为它可能很快就会过时，所以根本不需要使用

this.playbackState

。您只需在每次需要访问当前播放器状态时等待它

import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import TrackPlayer from "react-native-track-player";

import Player from "../components/Player";
import playlistData from "../data/playlist.json";
import localTrack from "../resources/pure.m4a";

export default function LandingScreen() {
  const playbackState = TrackPlayer.usePlaybackState();

  useEffect(() => {
    TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
      stopWithApp: false,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
        TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
        TrackPlayer.CAPABILITY_STOP
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ]
    });
  }, []);

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add(playlistData);
      await TrackPlayer.add({
        id: "local-track",
        url: localTrack,
        title: "Pure (Demo)",
        artist: "David Chavez",
        artwork: "https://picsum.photos/200"
      });
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.description}>
        We'll be inserting a playlist into the library loaded from
        `playlist.json`. We'll also be using the `ProgressComponent` which
        allows us to track playback time.
      </Text>
      <Player
        onNext={skipToNext}
        style={styles.player}
        onPrevious={skipToPrevious}
        onTogglePlayback={togglePlayback}
      />
      <Text style={styles.state}>{getStateName(playbackState)}</Text>
    </View>
  );
}

LandingScreen.navigationOptions = {
  title: "Playlist Example"
};

function getStateName(state) {
  switch (state) {
    case TrackPlayer.STATE_NONE:
      return "None";
    case TrackPlayer.STATE_PLAYING:
      return "Playing";
    case TrackPlayer.STATE_PAUSED:
      return "Paused";
    case TrackPlayer.STATE_STOPPED:
      return "Stopped";
    case TrackPlayer.STATE_BUFFERING:
      return "Buffering";
  }
}

async function skipToNext() {
  try {
    await TrackPlayer.skipToNext();
  } catch (_) {}
}

async function skipToPrevious() {
  try {
    await TrackPlayer.skipToPrevious();
  } catch (_) {}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  description: {
    width: "80%",
    marginTop: 20,
    textAlign: "center"
  },
  player: {
    marginTop: 40
  },
  state: {
    marginTop: 20
  }
});

const playbackState = await TrackPlayer.getState(); // <-- get player state
if (playbackState === TrackPlayer.STATE_PAUSED) {
  await TrackPlayer.play();
} else {
  await TrackPlayer.pause();
}

const playbackState=wait TrackPlayer.getState（）；//this.togglePlayback（）}
/>
);
}
}

您遇到的错误是什么如果我们知道您遇到的错误将更容易调试在状态

playbackState:TrackPlayer中。使用playbackState（），

，并在

切换播放

处理程序中引用为

this.state.playbackState

。谢谢Drew Reese。我试过你的方法。我得到的错误是：不变冲突：无效的钩子调用。钩子只能