The company recently to add new projects, in order to facilitate the project company's new colleagues quickly get started, take the time to put together your document existing structure of the project. With the consolidation, it may feel from other developers react-native native turn may also encounter a doubt, rn infrastructure projects should be how to build. Here to share their experiences, we hope to provide some reference.
After the recommendation clone, shining on the project to read this article
demo Address: live demo, continuous update
redux manages data flow used in the project, look at the architecture diagram of the entire project:
Look at the overall project directory structure:
Note: redux and routine into different action, reducer, store in a three-part project. action and reducer in the project to merge together.
1. The display layer
- Routing (navigator)
- Vessel components (screen), page
- Display component (view)
Route 1 (Navigator)
Responsible for managing all of the page (screen) within the app, configure routing rules jumps, transitions, animation, header style, etc.
2 container assembly (Screen)
Each page corresponds to a container assembly, is responsible for managing the entire page of data, and display assembly.
Small projects, the business logic is relatively simple, the controller may be incorporated in the functional block diagram of components into the container, so that it is also responsible for interaction with the other levels. corresponding to the demo such implementation. File may be omitted, may be incorporated into the container assembly, the control concept of this layer, we have to clear. Not only to separate files corresponding to the control layer, or the container assembly into a control layer.
If the project is complex, complicated business logic, this time on the need for a controller to manage the current page file data and external interaction. At this point the project becomes a project directory structure diagram inside look.
3 shows the component (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 控制层
Operation control layer, can be referred to bear container assembly, you may be given a separate file controller to bear. As to which documents handed over to bear, please decide. This section describes the control layer what specific work should be undertaken.
The main content is to provide data to the component. In two ways:
1. the component invokes a method within the controller, request the data, the controller obtain the data, the method returns to the value of the mode, returns directly to the components used. Asynchronous data is recommended to use async await the way / acquisition.
2. components associated store. Notification controller initiating a request for acquiring data within the assembly. After the controller to obtain the data, transmitting dispatch, modified data within the store. Redux by the mechanism, the use of the data to the component.
controller for acquiring data sources:
1. Network request;
the item 2. If there is a native part of the module, by interacting with the bridge original, the read data.
3. When the request from the assembly, the incoming transmission parameters, parsed, returns to the components used. (Analytical data)
Layer 3 data
The entire project data provider
A network request
Here responsible for configuring all the url information, switching debug / release corresponding to the url. Implement particular network requests.
Native data portion 2
3 store
store according to the specific business division good internal data module.