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刀仍是算了…）

截图