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

妤锋シ发布于2019-08-21 17:14 / 1850人阅读

摘要：比如安卓平台在中不能触屏手动滚动。主要的功能界面模块大部分主要是展示的，网易云的页面和功能实在是太多了，由于时间关系，并没有把所有的功能都做完整，后续会陆续加上其他的功能。各部分模块首页展示音乐播放，包括动画，歌词同步等。

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

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

老规矩，先上图~?

总览

音乐播放

视频播放

歌曲列表

用户界面

电台详情

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

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

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.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.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89281.html

完整app - 收藏集 - 掘金

摘要：细节今日力推风格款资讯类学习仿照豆瓣音乐效果掘金一风格款资讯类学习模块简介百思不得姐数据来源于百思不得其姐抓取，其中包含视频播放，段子，图片。 Android 实践：做一款新闻 APP - Android - 掘金跟代码相关的工作，大多唯手熟尔，所以这里花了点时间做了款简易版的新闻 APP，虽然都是些基础的内容，不过还是可以加深自己对部分代码的理解。至少，可以加深自己的记忆 ... 高...

马永翠 2019-06-25 11:28 评论0 收藏0
项目 - 收藏集 - 掘金

摘要：掘金非官方的知乎日报，一款基于的。项目实战跟小一起做菜鸟音乐高仿网易云音乐今日力推厨客趣刻掘金一厨客简介，厨客，是一款查询搜索分类收藏菜谱功能的。 Android 教你打造独一无二的刷新加载框架 - Android - 掘金其实早在去年七月，群里小伙伴就有让我共享这个。但我当时绝的技术不纯熟。代码有bug什么的。没有写出来。现在感觉整理的差不多了。就写出来让大家看看，有问题一起讨论解决...

jcc 2019-06-25 11:26 评论0 收藏0
android代码 - 收藏集 - 掘金

摘要：最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。源码地址应用瘦身，从到掘金，大家好，我是。注意，如果标题带有英文，说明官方还没有翻译成中一行代码解决闪屏页广告页篇掘金闪屏页或者广告页在众多里是比较常见的。最新最全的 Android 开源项目合集 - Android - 掘金awesome-github-android-ui 是由OpenDigg整理并维护的安卓UI相...

tuniutech 2019-06-25 11:23 评论0 收藏0
Android进阶 - 收藏集 - 掘金

摘要：技术创新深度研仿京东天猫的商品详情页的布局架构以及功能实现掘金前言电商内，重点在于详情页商品展示，用户不仅要看到图，可以看到各种描述，以及相关规格参数。项目需求讨论推送及启动方式掘金图片上传中。。。一款完整的外包资讯类 App - Android - 掘金外包集中营整合多个软件外包平台项目信息，替你筛选优质项目 ... Android 中线程池的使用 - Android - 掘金...

yankeys 2019-06-25 11:21 评论0 收藏0
完整的开源APP - 收藏集 - 掘金

摘要：该框架旨在向你展示一个轻量级的应用的总体结构以及如何构建多应用，为了译一步一步教你做一个风格的安卓天气掘金这篇文章教我们如何根据设计指南来创建一个风格的安卓天气。分享 50 个完整的 React Native 项目 - 掘金本文为 Marno 原创，转载必须保留出处！公众号 aMarno，关注后回复 RN 加入交流群简书专题《 React-Native 开发阵营》，欢迎关注和投...

Karuru 2019-06-25 11:16 评论0 收藏0