react native 開發的一個書房類項目

項目介紹

使用 react-native + dva + react-navigation 開發的一款書房類項目。

項目接口及UI使用的是時光流影開發的時代書房項目

此項目僅用來學習交流

IOS下載地址 ：(https://www.pgyer.com/3oNx)

部分運行效果圖（更多圖片在文末）

開源地址

github

如何運行

克隆項目
npm i
react-native link
使用Xcode打開項目，運行便可
複製代碼

使用的技術及框架

• dva.js

• react-native: "^0.51.0",

• react-navigation: "^1.0.3",

• react-native-modal: "^4.1.1",

• react-native-swiper: "^1.5.13",

• react-native-root-toast: "^3.0.0",

• react-native-vector-icons: "^4.5.0",

• react-native-image-picker: "^0.26.7",

開始

項目框架搭建參考的是a React Native starter powered by dva and react-navigation

項目結構

|-- android 
|-- ios
|-- node_modules
|-- app
    |-- components // 公用組件
    |-- containers 
        |-- Home // 首頁
        |-- Category // 分類
        |-- Press // 出版社
        |-- Rank // 排行榜 
    |-- images // 靜態圖片
    |-- models // 各個組件model （可參考[dva.js](https://github.com/dvajs/dva)）
        ... 
    |-- page //存放非tab頁的每一個頁面組件 
    |-- services // 定義API
    |-- utils // 工具及方法
    |-- index.js // 建立dva實力，註冊應用，記載model的地方
    |-- router.js // 定義路由
|-- index.js // 主入口
複製代碼

遇到的坑

1. 獲取驗證碼的倒計時，清除倒計時的時機要考慮周全
2. 書籍閱讀時返回的是html拼接的，沒有好的辦法去完成翻頁效果，因此用的是Webview
3. 數據的緩存與刷新時機（還未考慮全）

todo

1. 緩存數據優化
2. 分享
3. 代碼優化

總結

首先很是感謝dva的做者sorrycc，這個項目真的很贊。

本身也是看了好久的RN，不過因爲公司緣由，一直都是自學，並無上線項目（原本打算把這個打包上線的，不過要開發者帳號，99刀仍是算了…）

截圖