android效果
[video(video-q8EJW2y5-1592291410395)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=583605396)(image-/i/ll/?i=img_convert/8ab249a7ac7c8acac580d7f0e594e75e.png)(title-react-native音乐播放)]
ios区别:加载动画使用了lottie,android遇到闪退问题,没有使用动画
功能:
拖拽卡片选择专辑,卡片向下拖动可移除,下一张替换,点击卡片进入音乐列表,有此专辑的信息展示,一个点击打开或关闭的介绍,关闭时会自动滚动到介绍头部,
音乐列表可点击播放对应音乐,点击左侧的播放图标功能一致,再次点击暂停音乐,再点击恢复播放,并用asyncStorage保存当前播放的音乐,和音乐的状态(播放或暂停),这样退出这首专辑的时候,再次进入可以判断是否进入过此专辑,若进入过,再判断是否播放过音乐,和音乐的状态,以保持音乐列表图标的一致
音乐列表底部一个点击了音乐才会显示的控制栏,进行上一曲,下一曲的切换和当前音乐的播放暂停控制
点击底部栏的音乐图片或音乐的名称进入歌词页面,进度条显示音乐播放进度,点击可跳转播放进度,中间有音乐图片随音乐播放而转动,音乐暂停而停止转动,点击图片会显示歌曲的歌词
点击歌词两侧空白区域可关闭显示歌词,点击某句歌词可跳转到当前点击位置播放,拖拽歌词松手后会在一句歌词播放时回到歌词播放位置,并且歌词下方也有音乐上一曲,下一曲,以及播放暂停控制
用到的工具,库,技术
整个项目使用expo构建了,使用了很多expocli提供的功能,expo-blur,@expo/vector-icons,包括音频expo-av
歌词页是一个独立的路由,控制音乐切换和播放暂停功能用到了redux,利用redux发送不同的状态,控制音乐列表页底部的控制栏进行切换和播放暂停功能,问题就是有个响应的过程,没有点击即产生效果
加载音乐列表ios用了lottie动画,android遇到的闪退问题,换成了普通的loading动画
再就是rn常用的ui库 antd,react-native-paper,react-native-element
项目地址 https://github.com/tangmusenLiu/react-native-music.git
来找我玩啊