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两个平台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。