react-native版知乎日报APP（三） 目录结构与文件说
项目目录结构
├─assets 资源文件夹
│ ├─images 图像资源
│ └─video 视频文件
├─componetns 组件文件夹
│ ├─AvatarPicker 头像选择
│ ├─Bar 进度条
│ ├─CountDownButton 倒计时按钮
│ ├─ProgressBarModal 下载进度弹层
│ ├─PullUpLoading 下拉加载
│ ├─ScrollView 集成上拉刷新和下拉加载的ScrollView
│ └─StoriesList 公共日报列表
├─pages 页面文件夹
│ ├─Comment 评论页
│ ├─Details 详情页
│ ├─Drawer 侧边栏
│ ├─Home 首页
│ ├─ImgView 图像缩放下载
│ ├─Login 登录
│ ├─Registered 注册
│ ├─Section 栏目
│ └─Setting 设置
├─routers 路由文件夹
│ └─AppRouter.js APP主路由
├─store 状态管理仓库文件夹
│ ├─index.js 导出Store
│ └─ThemeStore.js 主题Store
├─theme 主题文件夹
│ ├─ blackTheme.js 夜间主题配色
│ └─ defaultTheme.js 默认主题配色
├─utils 工具和配置文件夹
│ ├─ api.js API配置文件
│ ├─ axios.js Axios配置文件
│ ├─ index.js 统一导出各工具组件
│ ├─ storage.js 本地存储初始化配置文件
│ ├─ strageSync.js 本地存储同步远程数据函数
| ├─ system.js 获取系统信息
| └─ tools.js 工具函数
|
|_ App.js 应用根节点
文件说明
- App.js (应用根节点)
- AppRouter.js (应用主导航)
页面导航路由图
App.js
App.js是整个应用的根级组件 , 在这个组件中主要挂载了一些全局功能组件, 包括: 热更新 , 本地存储 , 极光推送等.
AppRouter.js
AppRouter中结合react-navigation框架, 声明应用的路由导航信息 , 并导出到给App.js使用 . 其中路由导航是一个两级嵌套结构 , 外层为抽屉导航(DrawerNavigator) , 实现侧边栏抽屉与主页面的切换功能 . 主页面(Home)中嵌套一个堆栈导航(StackNavigator) , 用于实现页面之间的跳转功能 .
需要注意的 , 为了监听侧边栏获取焦点事件 . 这里使用DeviceEventEmitter方法处理事件通知. DeviceEventEmitter在用于解决跨页面事件通知时很方便 . 列如 我在A页面触发一个事件 , 希望B页面也能接收到时,就可以用到DeviceEventEmitter .
配置文件
store 文件夹
store 文件夹用于存储创建的Store文件 , 应用中使用 Mobx 作为状态管理工具 , Mobx比Redux更简单一点 . 应用中仅主题切换功能使用了Mobx .
- index.js 主要用于将多个Store库汇集成一个对象导出 , 因为项目中仅有一个Store , 也可以忽略掉.
- ThemeStore.js 主题Store , 声明主题切换的action方法
扩展阅读
utils 文件夹
utils中包含API , 本地存储配置文件 , 以及tools等工具函数 . 这里还封装了
Axios用于替代Fetch做htttp数据请求 .
这里主要说明的 , 为了实现日报的离线访问 , 需要实现列表缓存数据 . 这里使用react-native-storage实现相关功能 .
utils 文件夹下的storage.js 和 strageSync.js 都是 react-native-storage 的配置文件 .
storage.js是用于初始化 , 通过App.js导入项目中就可以全局使用. strageSync.js是用于配置同步远程数据 , 刷新本地存储数据的异步方法 .
theme 文件夹
包含默认和夜间的主题配色信息
全局组件
AvatarPicker (头像选择组件)
结合 react-native-actionsheet 行动表组件 , react-native-image-picker 图像选择组件 , react-native-image-crop-picker 图像裁切组件 , 实现一个图像选择到裁切的用户头像选取组件.
Bar (进度条组件)
实现动画进度条 , 用于配合 ProgressBarModal(下载进度组件)
CountDownButton (倒计时按钮组件)
倒计时按钮封装 , 主要用于点击获取验证码时的倒计时按钮.
ProgressBarModal (下载进度条弹层)
用于热更新时显示下载进度
PullUpLoading (下拉加载状态组件)
用于下载刷新时 , 在列表底部显示"正在加载"或"没有更多了"等文字信息 , 应用中的下拉刷新和上拉加载都是自定义组件实现的 , 功能比较简单 . 实际开发中有第三方组件可以使用react-native-largelist
ScrollView (滚动容器组件)
此ScrollView中组件封装了上拉刷新和下拉触底的方法
StoriesList (日报列表组件)
日报列表在应用中可以复用
