使用react-native实现一个音乐播放器

原创
2020/02/24 17:19
阅读数 1.2K

背景:

前段时间,在网上找周杰伦的音乐,结果发现只在QQ音乐才有的播放权限,还得付费,作为程序员的我怎么能甘于堕落花钱听音乐,于是我就跑到淘宝买了周杰伦的音乐集(不贵,几块搞定),全部下载下来播放,不走QQ音乐播放,用网易云音乐播放,在开始的时候还给播放,正常放了一个月左右时间,又不让播放了,好气啊! 程序员怎么甘于堕落到被他人限制不能听音乐! 于是就有了下面这个app.

 

需求说明:

我需要一个播放器,可以播放我本地的音乐,并且给这些音乐分类,我点哪个音乐集就播放哪个音乐集.数据不需要保存到服务器上,保存本地即可.UI不需要好看,功能能正常使用就可以.

 

github开源处:

https://github.com/kaykie/react-native-music-play 走过路过请大爷们,大佬给个star.

 

需求文档思路:

 

 

 

 

实现效果:

1.首页

 

 

 

 

2.拉取本地音乐页面(已拉取)

 

 

 

 

3.未拉取

 

 

 

 

4.点击歌集播放音乐

 

 

 

 

5.添加歌集页面

 

 

 

 

 

项目开发:

既然有这些个页面就应该好好规划页面的路由.于是我的路由列表如下:

export default StackNavigator({  
home: {    
    screen: Home,
    navigationOptions:config.navigationOptions('首页',null)  },
  musicListDetail: {
    screen: MusicListDetail,
    navigationOptions: ({navigation}) =>{
      return config.navigationOptions('添加音乐到歌集',true,navigation)
    }
  },
  addMusicCollect: {
    screen: AddMusicCollect,
    navigationOptions: ({navigation}) =>{
      return config.navigationOptions('添加歌集',true,navigation)
    }
  },
  musicCollectDetail: {
    screen: MusicCollectDetail,
    navigationOptions: ({navigation}) =>{
      return config.navigationOptions('播放歌集',true,navigation)
    }
  },
  chooseMusicCollect: {
    screen: ChooseMusicCollect,
    navigationOptions: ({navigation}) =>{
      return config.navigationOptions('选择歌集',true,navigation)
    }
  },}, {
  initialRouteName: 'home',  drawerWidth: 300});

 

 

细心的同学可能会发现,展示的效果里有两个页面的title都是播放歌集,这个是当时在写的时候出现的失误,也是自己没有想清楚最终的架构要怎么样产生的.后面有改过,改过了 '添加音乐到歌集';

 

业务逻辑:

这个项目的业务逻辑很简单,如果是单单写业务的话,可能自己1天左右就搞定了.

就是歌集的增删改,添加歌曲的增删改.这里就不介绍了.

 

关于项目中碰到的难点:

确实好久没玩react-native 都不知道现在的生态是如何的了,不过这一整个项目下来,给我的感觉就是生态很完善,有很多的组件人家都帮你写好了.

难点1:

关于语言的选择. 我想说的是,在最开始的时候,我有尝试过flutter,我也有认真的去学习他的语法知识,就是为了简单的写出几个列表,最后也写出来了.但是当我真正准备去开发这个app的时候,问题来了,如何获取本地的音乐列表呢?如果播放这些音乐呢? 我也找了有一段时间了,发现没有合适的api或者合适的组件库,反而让我找到react-native相关的. 于是便采用了react-native来开发我这个music播放器.

难点2:

开发环境的搭建.有人说开发环境不是很简单吗?照着搭就好了啊,然而没那么容易,首先我的手机是android的,需要用到android studio,下载花了很长时间,然后要安装适合目前react-native版本的android SDK,由于自己不懂android,很多时候都是摸着石头过河的,所以在这上面也浪费了很多时间. 最开始的时候 安装了一个最新版本的react-native,0.6几的,发现一个核心组件库(react-native-get-music-files)不支持,后面github上一个,已经2年没更新了.只能使用2年前的react-native版本号,与此同时,android的编译的java环境也要换成低版本的.

难点3:

各种莫名奇妙的报错.

1._react2.default.createContext is not a function;

2.React Native 错误 Module does not exist in the module map;

3.Error:Execution failed for task ':app:javaPreCompileDebug'.

> Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor. Please add them to the annotationProcessor configuration. ;

4.A problem occurred evaluating project ':react-native-vector-icons'. > Could;

5.Could not find method google() for arguments [] on repository container.

还有其它的,不过大部分问题都是版本的问题,不是react-native对不上当前运行的java环境,就是gradle 版本对不上当前的react-native版本,在后面打包生成apk的时候在使用android studio会自动改了这个gradle的版本,有些坑.

难点4:

搭架构.由于用的是低版本的react-native(0.53.3),所以很多组件库也得用相应的版本.比如用到的mobx,react-navigation,react-native-video,react-native-vector-icons等等,经过一段时间的调试也能找到相应适用的版本号.

难点5:

打包成apk.打包的过程中挺难,记得第一次打包,android studio把我的gradle的版本改了,导致我后面怎么也打包不了,开发环境也运行不了,找不到原因,后来尝试的重新新建一个项目,一步一步从0开始开发,到目前为止至少重新来了10来次,不仅仅是0.53.3版本,还试过0.58版本,后面解决了还是主要是因为这个版本的问题.

 

总结:

程序员为了让自己过的更好,总有这些或者那些想法,可是想法仅仅是想法,如何付诸实践又是另外一回事了.这个项目还没有完结,里面还有一部分需求还待完善,比如歌集名称的修改与删除就没做,还有歌曲的筛选,目前因为是只针对自己的需求,所以只过滤出周杰伦的歌曲,其它歌曲忽略了,有兴趣的话,可以去改代码,然后自己生成一个apk包安装到自己的手机里.

通过这个项目,回顾了react-native开发流程,提高自己解决问题的能力.整个项目思路采用mobx状态管理,把逻辑都抽离到顶层,让UI保持纯粹的UI,可能这种写法并不适合大部分人,不喜勿喷哈!当然也欢迎各位大佬指教.

原文:https://www.xiaye0.com/articlejs?id=39

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部