使用react-native实现一个音乐播放器
背景:
前段时间,在网上找周杰伦的音乐,结果发现只在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,可能这种写法并不适合大部分人,不喜勿喷哈!当然也欢迎各位大佬指教.