脚本宝典收集整理的这篇文章主要介绍了

React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台。

GitHub 完整源码地址https://github.com/yezihaohao/NeteaseCloudMusic
源博客地址
掘金地址

老规矩,先上图~?

总览

全图

音乐播放

音乐播放

<!--more-->

视频播放

视频播放

歌曲列表

歌曲列表

用户界面

用户界面

电台详情

电台详情

主要的技术栈和依赖第三方库:

点击名称可跳转相关项目网站??

ps: 个别插件会存在小bug或冲突。比如安卓平台swiper在scrollable-tab中不能触屏手动滚动。

主要的功能界面模块

大部分主要是展示的demo,网易云的页面和功能实在是太多了,由于时间关系,并没有把所有的功能都做完整,后续会陆续加上其他的功能。

  • 各部分模块首页展示
  • 音乐播放,包括CD动画,歌词同步等。
  • MV视频播放
  • 个人详情页面
  • 其他细节等等

安装运行

特别鸣谢:NeteaseCloudMusicApi 提供全套API

运行本项目前请先本地(或服务器)运行此API接口项目,替换/scr/api/index.js 下BASE_URL的ip地址
0. 开发环境平台版本:Android-6.0  ios-10.3

1. git clone https://github.com/yezihaohao/NeteaseCloudMusic.git

2. yarn or npm install

3. react-native link 

3. react-native run-ios 或者 react-native run-android

总结

react-native上手不难,熟悉react,看react-native文档,看下开源项目就可以开始开发,就是向下兼容比较差,可能这个版本用的别人的组件下个版本就会有bug。

一般展示性的界面比较容易,重点熟悉flex布局,注意默认纵向排列。

动画模块也需要着重了解下,可以提升用户体验。

多了解下其他的第三方组件,有很多别人都写好的,也要看react-native更新文档。

其他细节在开发过程中慢慢体会~~???

刚入门react-native,大佬轻喷~~

该项目会持续更新~所有使用数据仅供学习交流,并无它意。若有疑问,可加前端QQ群与我交流:264591039

License

MIT License.

总结

以上是脚本宝典为你收集整理的

React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台

全部内容,希望文章能够帮你解决

React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过