React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台
React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台。
GitHub 完整源码地址https://github.com/yezihaohao/NeteaseCloudMusic
源博客地址
掘金地址
老规矩,先上图~?
总览
音乐播放
<!--more-->
视频播放
歌曲列表
用户界面
电台详情
主要的技术栈和依赖第三方库:
点击名称可跳转相关项目网站??
- react@16.0.0-alpha.12
- react-native@0.48.2
- react-native-scrollable-tab-view@0.7.4(可滚动切换tab页面组件)
- react-native-swiper@1.5.10
- react-native-vector-icons@4.3.0(包含很多icon图标)
- react-native-video@2.0.0(视频和音频播放器,经调研,最近版的安卓和IOS系统版本可正常使用)
- react-navigation@1.0.0-beta.11(推荐使用的路由库)
- redux@3.7.2(项目中重点用在播放器相关功能上)
- 其他细节库省略
ps: 个别插件会存在小bug或冲突。比如安卓平台swiper在scrollable-tab中不能触屏手动滚动。
主要的功能界面模块
大部分主要是展示的demo,网易云的页面和功能实在是太多了,由于时间关系,并没有把所有的功能都做完整,后续会陆续加上其他的功能。
- 各部分模块首页展示
- 音乐播放,包括CD动画,歌词同步等。
- MV视频播放
- 个人详情页面
- 其他细节等等
安装运行
特别鸣谢:NeteaseCloudMusicApi 提供全套API。
运行本项目前请先本地(或服务器)运行此API接口项目,替换/scr/api/index.js 下BASE_URL的ip地址
0. 开发环境平台版本:Android-6.0 ios-10.31. git clone https://github.com/yezihaohao/NeteaseCloudMusic.git2. yarn or npm install3. 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 通过配置文件package.json设置 Android安卓和iOS版本号
目录: 版本说明 安卓配置内容 iOS配置内容 最终效果(修改配置文件package.json,安卓和iOS自动修改版本号) 一.版本说明 本机系统: Mac Android studio: 3.6. ...
- react native TextInput输入限制字数长度在安卓和iOS设备上部分系统键盘输入问题
前奏 对于正在学习RN和已经在RN这条路上摸爬滚打很久的看官应该都知道,虽然RN的跨平台做的很不赖,但是也有一些小细节是无法兼顾的,今天兄弟就遇到了一个小问题.(小问题有时候却很致命). 问题描述 安 ...
- 网易云亮相GITC,聚合多样化通信与视频云平台
近年来,随着移动互联网的大行其道,单纯以文字.语音.视频为媒介的沟通方式已经不能满足人们的沟通需求.而在各行业数字化转型的浪潮中,融合性的通信和视频服务越来越多地被应用到不同的场景中. 整合性的通信与 ...
- 自定义QListWidget实现item被hover时改变图标样式(模仿网易云音乐选项列表)(方法二)
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
- 自定义QListWidget实现item被hover时改变图标样式(模仿网易云音乐选项列表)(方法一)
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
- 解锁网易云音乐客户端变灰歌曲
解锁网易云音乐客户端变灰歌曲 最近周杰伦出新歌了,可是最喜欢的网易云木有版权?为了听歌不得不安装多个音乐播放器?喜欢的歌还要收费开会员?这里安利一个超好用的方法,以上问题通通搞定!在分享之前首先分享原 ...
- 基于Qt模仿网易云音乐播放器
基于Qt模仿网易云音乐界面,目前只实现了部分界面,后续继续完善改造. 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H#include <Q ...
- android 仿网易标签切换,高仿网易云音乐客户端的Home页面切换Tabhost-IT蓝豹
1.高仿网易云音乐客户端的Home页面切换Tabhost 高仿网易云音乐客户端的Home页面切换Tabhost,并且三角形是透明的, 实现方式,自定义AnimTabsView继承 RelativeLa ...
- vue-electron制作网易云音乐客户端
前言 就在两个月前公司需求快速开发一款桌面应用软件,嗯,快速. 并且提供了技术方案Nwjs,起初不知道这款框架的存在,网上查找了一波,发现更牛逼的一款快速搭建桌面应用的框架,那么它就是electron ...
最新文章
- Qt程序运行提示“it could not find or load the QT platform plugin “windows””
- Spark修炼之道(进阶篇)——Spark入门到精通:第八节 Spark SQL与DataFrame(一)
- git本地给远程仓库创建分支
- 电脑桌面图标变成长方形咋办_电脑桌面图标间距自动变宽为什么
- 登录不了WPS国际版,密码正确,在网页能够正常登录,在WPS不行,求解答,版本号是10.2.0.7646已刷语言包
- adams参数化优化设计例子
- java逆向_Java逆向入门(一)
- 微信朋友圈自动点赞---一个也不能少
- 服务器1U,2U的含义
- 2019年2月18日,异常作业
- 做服务号还是订阅号?
- Eclipse 断点不生效原因之一 Tigger Point 断点右下角出现类似箭头
- 【Derivation】任何矩阵都相似与Jordan标准形证明
- 将txt文本数据转换为json对象
- 你好,机器作诗了解一下
- 八数码--Astar--启发函数
- 简述物联网感知技术_《物联网技术》复习题
- 总结篇:系统及应用监控的综合思路
- 在微型计算机中1 mb准确等于,2013全国计算机等考一级微机知识模拟试题1
- 《大学之路》 学习笔记
热门文章
- boost::fibers::shared_future的用法实例
- Boost:boost::atomic用法实例
- ITK:读未知的图像类型
- VTK:Filtering之WarpTo
- C++bidirectional dijkstra双向最短路径算法(附完整源码)
- QT的QEnableSharedFromThis类的使用
- C语言程序的内存四区模型
- pcb 布线电容 影响延时_信号在PCB走线中传输时延
- 53_Auto-Encoders和Variational AutoEncoders(VAE)、PCA降维和Auto-Encoders降维的比较、Auto-Encoders变种、pytorch实现等
- HBase建表高级属性,hbase应用案例看行键设计,HBase和mapreduce结合,从Hbase中读取数据、分析,写入hdfs,从hdfs中读取数据写入Hbase,协处理器和二级索引