ZhiBoProject

项目介绍

注意：项目内的redux和常规的分为action，reducer，store三部分不同。项目内的action和reducer合并到一起了。

1.显示层

路由（navigator） 容器组件(screen)，页面 显示组件(view)

1 路由（navigator）

负责管理app内所有的页面（screen），配置路由跳转规则，转场动画，header样式等

2 容器组件(screen)

每一个页面对应一个容器组件，负责管理整个页面内的数据，和显示组件。 小型项目，业务逻辑相对比较简单，可以将结构图中的controller的功能合并到容器组件内，使得其同时负责与其他层级交互。demo内对应的该种实现。文件可以省略，可以合并到容器组件内，但是控制层这个概念，大家要清楚。仅仅是没有单独的文件去对应控制层了，或者说容器组件变成了控制层。 如果项目较复杂，业务逻辑复杂，这个时候就需要有一个controller文件来负责管理当前页面数据和对外的交互。此时项目结构就变成了项目目录图里面的样子。

3 显示组件(view)

只承担显示职责。不处理任何业务逻辑。显示组件在项目内，会复用度最高的。在任何页面内，传递指定的数据格式，即可以实现服用。

style文件夹

目录架构内有一个style文件夹，这个地方或许叫UI文件夹更妥当一些。这个文件夹内的内容。需要和项目团队内的UI沟通设计规范后确定,此处记录了整个app的设计规范。这地方是一个很好用的模块，可以快速切换主题，快速适配各种机型。 先说颜色： 内部应该包含整个项目内使用的所有颜色，所有的字号，所有字体等信息。如果合作效率较高。可以一起确定出项目内所有使用的公共组件的样式，比如项目内使用的所有按钮的样式，所有header的样式，所有列表item的样式，所有的间距值等等。 并且给每个对应的值，取一个共同知晓的名称。比如项目内主题色primaryColor，bgColor，一般会使用2-3种红色（red1,red2），2-3种蓝色(blue1,blue2)等 后续在UI出设计图的过程中，颜色标注，使用约定的名称即可。当后期设计图出现改动的时候，只需要将对应颜色色值修改，整个app就可以切换主题。又或者老版本所有的按钮都是使用带阴影的按钮，现在修改为扁平化设计，只需要把项目内的按钮组件调整一个布局，整个app即可切换完成。 再说一下size： size内要约定好整个app每个页面的上下左右的边界值是什么，状态栏的高度是什么，不同机型的适配则可以在该处处理。比如iOS和Android顶部的状态栏高度不一致。是否全面屏的又是另外一个值。是否有虚拟导航栏又会是另外的值。这个部分使用好的话，能给适配提供大量便利。

2 控制层

控制层的工作，可以交由容器组件承担，也可以交给单独的controller文件来承担。至于交由哪个文件承担，请大家自行决定。该部分主要介绍，控制层应该承担哪些具体的工作。 主要工作内容则是给组件提供数据。两种方式： 1.组件调用controller内的方法，请求获取数据，controller得到数据后，以方法返回值的方式，直接返回给组件使用。异步数据推荐使用 async/await的方式获取。 2.组件关联store。在组件内通知controller发起获取数据的请求。controller得到数据后，发送dispatch，修改store内的数据。通过redux的机制，将数据传给组件使用。 controller获取数据的来源： 1.网络请求； 2.项目内如果有原生模块部分，通过bridge与原生交互后，读取数据。 3.组件在起请求时候，传递进来的参数，解析后，返回给组件使用。（解析数据）

3 数据层

整个项目的数据提供者

1 网络请求

此处负责配置所有的url信息，debug/release对应的url的切换。具体的网络请求的实现。

2 原生部分的数据

3 store

store要根据具体的业务，划分好内部的数据模块。

运行项目

1. 配置好react-native开发环境

2. 项目中使用的yarn，没有使用npm，所以需要安装yarn

下载项目后 进入项目目录package.js文件所在目录，执行

yarn install 安装依赖文件

react-native link 链接原生库

注意

本项目默认端口号做了更改，8081 --> 8071 Android运行的时候，需要注意

然后运行项目