公司项目最近要加新人，为了便于新同事快速上手公司项目，抽时间整理了一下项目现有结构的文档。随着整理，感觉可能其他从原生转过来的react-native开发人员可能也会遇到一个疑问，rn的项目架构应该怎么搭建。在此分享一下自己的经验，希望给大家提供一些参考。
推荐clone后，对照着项目来阅读本文
demo地址：直播demo，持续更新中
项目内使用的redux管理数据流，先看一下整个项目的架构图：
项目架构图
再看一下整体的项目目录结构：
react-native项目结构.png
注意：项目内的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要根据具体的业务，划分好内部的数据模块。
网友评论