准备工作

项目的目录结构

• assets : 各种静态资源，比如图像、音视频、字体、自带数据库等目录

• components : 自定义的组建库目录

• config : 配置文件信息目录

• pages : 页面目录

  1. App.js : 入口文件

     1. 创建和初始化堆栈导航

     2. 处理一些全局配置或者全局事件

  2. pageList.js : 页面导航配置

• utils : 工具类目录

  1. http.js : http数据请求

  2. navigation.js : 导航功能

  3. tools.js : 常用功能工具集

  4. dataMgr.js : 数据接口请求

本地文件的引用

• 多个RN应用进行切换时，使用require方式引用本地文件会有偶发的本地目录不对的问题

• 解决方法：见App.js 和 config.js 配置处理

番禺智能家居设计图

• 列表页
• 详情页

设计图分析

• 列表类设计

  1. 左边文字列表 -- 对应一个文字列表组件

     1. header头部
     2. 文字列表区域

  2. 右边海报列表 -- 对应一个海报列表组件

     1. N*N的排版布局
     2. 单个海报元素显示会有差异

• 详情类设计

  1. 内容显示区域 -- 根据需要看是否有必要独立组件

  2. 进度条 -- 对应一个进度条组件

组件

• ImageBackground

• PosterList

• TextList

• ProgressBar

注意事项

1. 按键保护

2. 组件通信

3. 性能

作业

1. 番禺智能家居设计图 : 参见上方设计图部分

2. 代码能在本地或者在线ide跑起来，能看到效果

3. 参考原始代码完成效果图

4. 有问题可以找讲师咨询