制作项目结构的最佳实践 - React Native

Question

我根据客户要求创建了新的 React Native 项目。我有知识，但还没有完成任何项目，所以请给我任何项目结构如何构建这个项目。

或者给我任何 git hub 链接

谢谢

Answer 1

在您的场景中，您可以创建自己的文件夹结构，或者我有一些我自己遵循的示例。

类型与功能

按类型分隔意味着我们按类型组织文件。如果是组件，则有容器和展示文件。如果是Redux，则有action、reducer和store文件。如果是view，则有JavaScript、HTML和CSS文件。

src
  app
    api
    assets
    redux
        actions
        reducers
        store
    components
    containers
    navigation
    styles
    utilities

来源/

所有文件都在这个基本组件内。

接口/

该文件夹包含与外部 API 通信相关的逻辑，它包括：

• constants.js - 存储所有必需的静态值。

• helper.js - 用于存储可重用的逻辑。

• 单独的功能文件——每个功能文件都包含特定功能的 api 通信逻辑。

资产/

顾名思义，它包含应用程序中使用的静态文件（例如图像）。

还原/

如果您使用react-redux来管理状态，这将保存所有 redux 文件。在 redux 文件夹中，您有操作、reducers、store 可以轻松管理您的 redux 文件

• 还原/动作

围绕 redux 使用的所有操作文件都放在这里。

• 还原/减速器

围绕 redux 使用的所有 reducer 都放在这里。

• 还原/存储

你可以把你的商店放在这个 redux store 文件夹中。

成分/

跨功能使用的共享组件放置在此目录中。这样的一个例子（如上所示）是layout组件，它用于包装应用程序组件并确定其整体布局。

集装箱/

您可以将所有基于屏幕的组件放在此处（例如 - SplashScreen、HomeScreen）。

导航/

您的项目基础导航在这里。您可以创建堆栈导航器并将其导出到您的应用程序。

款式/

如果您在项目中定义了全局样式，则可以将其放在此处，例如颜色、字体样式等。

实用程序/

你可以把 utils 文件放在这里。

注意：此结构基于我的经验。一旦你完成了更多的经验，你就可以创建自己的结构

也参考这些链接

https://medium.com/the-andela-way/how-to-structure-a-react-native-app-for-scale-a29194cd33fc

https://www.freecodecamp.org/news/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92/

https://github.com/asimolmez/react-native-folder-structure

https://github.com/thecodingmachine/react-native-boilerplate