时间戳

首页 > 解决方案 > React - 全局样式

javascript - React - 全局样式

问题描述

（我认为这不是基于意见的，我是要求一些东西的共同使用，以实现良好的重构代码）

如何在 React 项目中正确使用全局样式？我看到很多人都在使用它，但是这个想法是什么？我的意思是，这是一个定义超通用样式的模块，还是只是一个文件，我们在其中编写其他组件中常见的样式？

目前，这是我的项目结构：

app/

   components/
      Profile/
         Header.js
         styles/
             styles.js

   screens/
       Profile/
           Profile.js
           EditProfile.js
           styles/
               styles.js

   theme/
      theme.js

   styles/
      globalStyles.js
   
   utils/

   lib/

   ...

到目前为止，我只是在组件中编写所有样式，并且拥有长的样式文件并不是很好。这就是为什么我决定将特定样式从外部模块中的每个组件移动（特定于每个概念/组件）。

但是，globalStyles.js 呢？开发人员为什么要使用它？

现在，我正在考虑编写这样的代码，但似乎非常糟糕，我的意思是，就像我错误地应用“全局样式”的想法一样，因为这些样式看起来很简单，一个应用程序可以完美具有多种类型的文本，具有多个维度，这可能是有限的 UI 或巨大的 globalStyles 文件的结果......

import { StyleSheet } from "react-native";

export default StyleSheet.create({
  /*
    Flex column containers ??? 
  */
  flexContainer: {
    flex: 1,
  },
  flexCenteredContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  flexVerticallyCenteredContainer: {
    flex: 1,
    justifyContent: "center",
  },
  flexHorizontallyCenteredContainer: {
    flex: 1,
    alignItems: "center",
  },
  /* 
    Flex row containers ????
  */
  flexRowContainer: {
    flexDirection: "row",
  },
  flexRowCenteredContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  flexRowVerticallyCenteredContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  flexRowHorizontallyCenteredContainer: {
    flexDirection: "row",
    justifyContent: "center",
  },
  flexReversedRowContainer: {
    flexDirection: "row-reverse",
  },
  flexReversedRowCenteredContainer: {
    flexDirection: "row-reverse",
    justifyContent: "center",
    alignItems: "center",
  },
  flexReversedRowVerticallyCenteredContainer: {
    flexDirection: "row-reverse",
    alignItems: "center",
  },
  flexReversedRowHorizontallyCenteredContainer: {
    flexDirection: "row-reverse",
    justifyContent: "center",
  },
  /* 
    Texts, ... ???
  */
});

标签： javascriptcssreactjsreact-nativerefactoring

解决方案

推荐阅读