Reactjs 在React Native中拆分屏幕的最佳约定是什么？

假设我想将我的

screens/LoginScreen.js

拆分为不同的组件以提高可读性（不一定要重用）——我应该如何处理

我是否在screens文件夹中创建组件

或者我应该将它们放在组件中，例如：

还是有别的惯例？你推荐什么

---

我建议您使用登录屏幕中的部分名称

使文件夹结构像

Login/index.js 
Login/Components/LogoComponent.js
Login/Components/LoginInput.js
Login/Components/LoginButton.js

src/Component/LogoComponent.js
src/Component/InputComponent.js
src/Component/ButtonComponent.js

如果您想重用这个输入和按钮组件，那么您可以将文件夹结构设置为

Login/index.js 
Login/Components/LogoComponent.js
Login/Components/LoginInput.js
Login/Components/LoginButton.js

src/Component/LogoComponent.js
src/Component/InputComponent.js
src/Component/ButtonComponent.js

//对于这样的屏幕

src/Screens/LoginPage.js
src/Screens/SignupPage.js
src/Screens/HomePage.js

用于警报或装载机等实用程序

src/Util/Loader.js
src/Util/Alert.js

对于像redux这样的数据处理器

src/Redux/Actions
src/Redux/Reducer
...

像这样，您可以添加单独的文件夹供您使用，请参考相同的图像

---

您的第二个解决方案在

组件

目录中有一个

LoginScreen

文件夹，看起来不错。您可以以任何您认为合乎逻辑且易于导航和理解的方式构造屏幕和组件

就个人而言，我会为可重用组件保留

组件

目录，

组件

目录的每个直接子目录都应该是组件本身。如果有一个子组件由多个组件组合而成，则所有这些组件都可以位于该组件内。同样的事情也适用于屏幕

建议的目录结构可以是：

components
  - component-A
      - index.js // for re-export
      - ComponentA.js
      - ComponentATop.js
      - ComponentABottom.js
screens
   - screen-A
     - index.js
     - ScreenA.js
     - ScreenAPart1.js
     - ScreenAPart2.js  

我发现这种结构很容易导航和理解，原因如下：

• 从

  src/components/component-a

  导入始终会为您提供ComponentA。如果需要查找与其相关的子组件，则它们始终位于同一目录中。同样的事情也适用于屏幕

• 只有可重用组件将位于

  组件

  文件夹中。仅用于单个屏幕的组件将位于屏幕目录中。您不必怀疑组件来自何处

---

好建议。这对我来说很有意义，谢谢你！