React-Native : ‘^0.64.0’ 项目架构

项目场景：

这里介绍一下我自己从0-1的React-Native项目架构，细粒化的程度还行，主要我喜欢深度细粒化的项目，写起来很舒服。

---

package.json：

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.5", // 本地缓存
    "@react-navigation/bottom-tabs": "^5.11.10",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/native": "^5.9.4", // 路由
    "@react-navigation/stack": "^5.14.4",
    "native-base": "^2.15.2", // UI 库
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-blob-util": "^0.13.7", // rn-fetch-blob 的一个分支 优化更好
    "react-native-screens": "^3.1.1",
    "react-native-splash-screen": "^3.2.0", // 启动页
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^8.1.0", // 图标库
    "react-native-webview": "^11.4.3",
  },

---

文件夹结构：

1、api：存放后台接口
2、assets：静态文件
3、components：自定义组件、Hooks、layout之类的…
4、constants：顾名思义是常量
5、navigation：导航路由
6、pages\screens：UI页面
7、reducer：本意是想Hooks+Redux进行状态管理
8、styles：样式
9、utility：七七八八的帮助文件比如：大小屏幕尺寸适配、globalColor

---

此项目使用的是React : ^17.0,React-Native : ^0.64, react-navigation : ^5.x.

路由我习惯是:

以 NavigationContainer 在 App.js 内包裹所有路由，以内再嵌套子模块路由，需要 Drawer 抽屉则注册 Drawer 并包裹底部导航栏 BottomTabNavigator，其余则以子模块路由 Stack 注册，其内部为 Screen。

Stack 内则注册其子页 Screen.

---