如何在渲染或更改组件时保持歌曲播放，以及使用 React js 在底部导航栏中更新播放/暂停状态 [关闭]答案

【问题标题】：How to keep song playing when component is rendered or changed and also update play/pause status in bottom navbar using react js [closed]如何在渲染或更改组件时保持歌曲播放，以及使用 React js 在底部导航栏中更新播放/暂停状态 [关闭]
【发布时间】：2021-12-20 06:56:04
【问题描述】：

ReactJs.

显示专辑名称列表的主页说“album abc”。
用户点击专辑“abc”并看到与该专辑相关的歌曲列表，例如歌曲 1、歌曲 2、歌曲 3。
用户播放歌曲 1（播放歌曲）

现在这就是我想要做的，在第三步之后，我希望底部音乐导航栏在播放时显示歌曲名称并显示播放图标。（就像 jiosaavan 和其他应用一样）

此外，当我播放歌曲并移至另一个组件时，歌曲会暂停。 [我正在使用 ref 播放歌曲]

注意：我的代码不好，所以我从头到尾查看谢谢。

【问题讨论】：

标签： reactjs react-native react-redux react-hooks react-router

【解决方案1】：

尝试在 app.js 中使用组件，就像 navHeader 一样，并将音乐细节保留在该组件中，每次更改组件时都不会渲染，这可能会有所帮助。

<Router>
      your list of route here...

     <musicPlayer/>
</Router>

【讨论】：

嘿@livecoder，感谢您的回答，是的，我正在尝试，但我也想更改状态，当歌曲在任何页面上播放时，它应该在底部导航中显示名称和播放状态Spotify 和其他应用程序都可以。