該APP所用到的API均由 「ONE · 一個」提供，本人採取非正常手段獲取。獲取跟共享的行為或許有侵犯權益的嫌疑。請您瞭解相關情況，並保證不侵犯「ONE · 一個」的利益，並遵守開源協議https://github.com/accforgit/ReactNativeOne

專案描述

1. 到目前為止，該專案均由本人獨立完成，希望能有更多的小夥伴來一起完善這個專案。實現了「ONE·一個」絕大部分的功能點，涵蓋了圖文、閱讀、音樂、電影四大版塊，以下是功能列表
   • 使用ViewPager跟ListView展示圖文列表、檢視往期歷史圖文資訊、點選檢視大圖
   • 三種系列（短篇、連載、問答）的文章閱讀以及文章音訊播放，檢視往期文章列表
   • 音樂故事展示、音樂播放、檢視歷史音樂列表
   • 最近電影資訊列表、檢視電影詳情頁面、電影預告片播放、檢視劇照列表
   • 檢視文章、音樂、電影的評論列表，自定義擴充套件ListView，實現上拉載入更多資料
   • 微信好友分享、微信朋友圈分享
   • 快取api介面資料，充分節省流量，增強使用者體驗

介面文件

Android App下載

iOS App下載

無蘋果開發者賬號, 暫時無法打包APP, 請親自進行編譯並在模擬器或手機上執行

APP截圖

整體思路

1. 分析「ONE·一個」App的業務邏輯結構，將整體業務按重要程度進行劃分，安排整體開發流程
2. 使用官方的Navigator管理全域性路由，可自由配置Scene的出場動畫，處理Android端的後退鍵事件
3. 使用FlexBox和jsx語法進行佈局，並封裝了一系列通用的元件，比如GridView、帶上下拉功能的ListView、ImageViewer等，便於全域性複用
4. 在Android原生端實現音訊播放功能，並匯出Native Api給React Native使用
5. 匯入Video Native Api，自定義介面並實現電影預告片的載入播放
6. 匯入GitHub第三方庫react-native-wechat實現圖文、閱讀、音樂、電影的微信分享
7. 處理了App載入網路資料時的各種狀態，比如載入中、載入成功、載入失敗、點選螢幕重新進行載入等
8. 使用InteractionManager，保證每個頁面都在轉場動畫結束時才進行耗時操作，使得切換頁面時不卡頓，儘量減少View的層級，優化渲染效能
9. 在深刻理解的前提下引入redux相關功能，包括redux/react-redux/redux-thunk/redux-logger，設計與音訊相關的全域性state結構，使用redux管理與音訊state相關的元件

目前所發現的bug以及尚未完成的功能點

Android

1. Debug版本下的音樂版塊，ViewPager巢狀ListView出現問題，Release版本正常
2. Image元件uri為空時完全不佔位
3. 暫時沒能在Android上實現iOS ScrollView的contentOffset這樣的屬性，具體效果請檢視「ONE·一個」的音樂版塊

iOS

1. (done)
2. 音訊播放用的是原生的介面，Android我已寫完了，iOS端還沒有寫，所以暫時無法播放音訊
3. 閱讀版塊中有三種類型的文章，分別是短篇、連載、問答，在Android端顯示時一切正常，但是在iOS端有的連載文章顯示不出來，可能性有兩點：文字有特殊字元導致整體無法顯示、文字超長時Text標籤無法正常顯示(真機上執行一切正常, 所以應該是模擬器的問題)

共同問題

1. 音樂播放得加多一箇中間狀態，也就是緩衝狀態，否則載入緩衝音訊時間有可能太長，UI上全然無展示，體驗太差
2. 點選頂部音樂控制Modal檢視詳情(done)
3. 在音訊視訊中加入可拖動的進度條(done)
4. api介面資料快取(done)
5. 音樂播放已經加多了緩衝狀態, 但是在Android端, ActivityIndicator總是有問題, 特別是巢狀在Modal元件中的時候, 有時候會直接不旋轉. iOS端正常
6. 首頁中使用了很多個ViewPager, 沒有實現重用和懶載入, 很耗費效能

將來也許會做的功能點

1. 搜尋
2. 音訊視訊快取
3. javascript熱更新
4. 收藏
5. ......

Build

1. clone this repo
2. npm install
3. react-native run-android or react-native run-ios

第三方庫