react-native项目结构

react-native项目结构

|--android
|-- app               
|-- ios
|-- node_modules  
|-- index.js
|-- package.json
|-- ...

android:Android项目目录,包含了使用AndroidStudio开发项目的环境配置文件。

ios:iOS项目目录,包含了Xcode的环境配置文件。

app:react-native相关文件。

node_modules:基于node文件依赖系统产生的相关依赖。

index.js::ios或android的项目运行时的入口文件。

package.json:项目基本信息以及依赖信息。

app文件目录

|-- app               
    |-- actions
    |-- common
    |-- components
    |-- http
    |-- pages
    |-- reducers
    |-- store

actions、reducers、store:redux相关文件。

comon:存放一些公共文件,例如图片,样式主题等 。

components: 存放一些公共组件。

http:用于存放接口请求。

pages: 存放react-native构建页面。主程序的主要构成部分。

common文件目录

|--common
    |-- images                
    |-- native-base-theme     
    |-- CommonColors.js  
    |-- CommonConfig.js
    |-- CommonImages.js
    |-- CommonUtil.js
    |-- CommonStyles.js
    |-- index.js

images:存放公用图片,icon,background等。

native-base-theme:native-base的主题样式(非必须)。

CommonColors.js :公用的颜色,颜色统一管理。

CommonConfig.js:公用的全局配置,例如资源路径、接口地址、字符串常量等。

CommonImages.js:公用的图片路径管理。

CommonUtil.js:公用的一些工具类,例如设备屏幕的宽高、屏幕适配、判空处理、时间处理等。

CommonStyles.js:公用的CSS样式。

index.js:common文件引用的输出文件

pages文件目录

|--pages
    |-- App.js                
    |-- Main.js     
    |-- Root.js  
    |-- Hot.js
    |-- Mine
        |-- Mine.js
        |-- style.js
        |-- Setting
    		|-- Setting.js
    		|-- style.js
    	|-- ... 
    |-- ...

App.js:路由注册,创建SwitchNavigator。

Main.js:路由注册,创建StackNavigator。

Root.js:文件入口。

Hot.js:热更新文件。

Mine:项目中‘“我的”的模块。

以下为业务页面:

Mine/Mine.js:“我的”模块的页面。

Mine/Mine.js:“我的”页面的CSS样式。

Mine/Setting: “我的”模块中的设置模块。

MIne/Setting/Setting.js:“我的”模块中的设置页面。

MIne/Setting/style.js:“我的”模块中设置页面的样式。

redux相关的文件目录

actions文件目录

|--actions
    |-- type.js                
    |-- register.js     
    |-- user.js  
    |-- ...

reducers文件目录

|--reducers
    |-- index.js                
    |-- register.js    
    |-- user.js  
    |-- ...

store文件目录

|--store
    |-- index.js               

——项目结构优化 2.0.0 ——

上一版的项目结构在route方面有些混乱,所以在这一版主要针对route做优化整合,以及把redux相关文件整合在一起。

react-native项目结构

|--android
|-- app               
|-- ios
|-- node_modules  
|-- index.js
|-- package.json
|-- ...

android:Android项目目录,包含了使用AndroidStudio开发项目的环境配置文件。

ios:iOS项目目录,包含了Xcode的环境配置文件。

app:react-native相关文件。

node_modules:基于node文件依赖系统产生的相关依赖。

index.js::ios或android的项目运行时的入口文件。

package.json:项目基本信息以及依赖信息。

app文件目录

|-- app               
    |-- common
    |-- components
    |-- http
    |-- pages
    |-- redux
    |-- route
    |-- App.js

comon:存放一些公共文件,例如图片,样式主题等 。

components: 存放一些公共组件。

http:用于存放接口请求。

pages: 存放react-native构建页面。主程序的主要构成部分。

redux:redux 相关文件。

route:存放路由文件。

App.js:项目入口文件。

common文件目录

|--common
    |-- images                
    |-- native-base-theme     
    |-- CommonColors.js  
    |-- CommonConfig.js
    |-- CommonImages.js
    |-- CommonUtil.js
    |-- CommonStyles.js
    |-- index.js

images:存放公用图片,icon,background等。

native-base-theme:native-base的主题样式(非必须)。

CommonColors.js :公用的颜色,颜色统一管理。

CommonConfig.js:公用的全局配置,例如资源路径、接口地址、字符串常量等。

CommonImages.js:公用的图片路径管理。

CommonUtil.js:公用的一些工具类,例如设备屏幕的宽高、屏幕适配、判空处理、时间处理等。

CommonStyles.js:公用的CSS样式。

index.js:common文件引用的输出文件

pages文件目录

|--pages 
    |-- TestHot.js
    |-- Mine
        |-- Mine.js
        |-- style.js
        |-- Setting
    		|-- Setting.js
    		|-- style.js
    	|-- ... 
    |-- ...

TestHot.js:热更新文件。

Mine:项目中‘“我的”的模块。

以下为业务页面:

Mine/Mine.js:“我的”模块的页面。

Mine/Mine.js:“我的”页面的CSS样式。

Mine/Setting: “我的”模块中的设置模块。

MIne/Setting/Setting.js:“我的”模块中的设置页面。

MIne/Setting/style.js:“我的”模块中设置页面的样式。

redux文件目录

|--redux
    |-- actions            
    |-- reducers     
    |-- store 

actions:存放 redux 中 action 相关文件。

reducers:存放 redux 中 reducer 相关文件。

store:存放 redux 中 store 相关文件。

route文件目录

|--route
    |-- MainTab.js            
    |-- RootSwitch.js
    |-- StartStack.js
    |-- ...

MainTab.js :路由注册,创建BottomTabNavigator。

RootSwitch.js:路由注册,创建SwitchNavigator。

StartStack.js:路由注册,创建开始页面的StackNavigator。

…:路由注册,创建各个模块的StackNavigator。

——还会继续优化目录结构—-