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方法

扩展阅读

  1. React小书
  2. 慕课网Mobx入门视频教程
  3. Mobx中文网文档

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 (日报列表组件)

日报列表在应用中可以复用

推荐阅读更多精彩内容