Reactjs 从后端引入模板常量并在前端实现

我正在并行学习React母语课程和NodeJS课程。在ReactJS课程中，教授展示了如何在ReactNative中创建一个包含常量的文件，并将这些常量分发到需要的地方

在前端的React文件夹中，我首先设置了一个包含常量的文件，constants.js：

export default {
  HOME_BACKGROUND_COLOR: '#e8e8e8',
  ALTERNATIVE_HOME_BACKGROUND_COLOR: '#313131',
  HOME_FONT_FAMILY: '"Open Sans", sans-serif',
  BORDER_COLOR: '#DDDDDD',
  WARNING_COLOR: '#FFF300',
  ALERT_COLOR: '#D52B1E',
}

const Constants = () => {
  getConstants = async () => {
    await fetch(environment.provider + `constants`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    }).then(responseJSON => {
      console.log('responseJSON', JSON.stringify(responseJSON));
    }).catch(error => {
      console.log('Was an error: ', error)
    })
  }
  return (
    <View>
      {getConstants()}
    </View>
  )
};

export default Constants;

然后在我需要的一个文件中，一个css文件，但是因为我们在React Native中仍然是js文件常量，所以我导入顶部的文件并使用它们

AppStyle.js

import constants from './constants'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 26,
    backgroundColor: HOME_BACKGROUND_COLOR,
    fontFamily: HOME_FONT_FAMILY,
    alignItems: "center",
    justifyContent: "flex-start"
  }
});

所以这是可行的。我试着自己更深入地研究这个问题，并将这些常量放入数据库中。资深朋友告诉我，最好在后端设置这些常量，并从后端更改它们，例如，如果您为将来的项目制作样板文件

所以现在我从后端得到一个包含所有常量的json，和我在前端得到的一样，但现在是在后端

我花了将近一周的时间试图弄清楚如何从后端放置这些常量。我想把它们放在Redux商店里，但是我没有看到有人把connect放在样式文件里

求你了，相信我没有主意了。我想我没有足够的经验。 有人请给我一点帮助

更新： 按照你们告诉我的，我做了这个：

在App.js中，我将它们放在console.log上查看

render() {
    return (
      <View
        style={{ flex: 1 }}
      >
        <Constants />
      </View>
    );
  }

我不知道该怎么办

---

我做错了？

如果常量来自后端，它将成为JSON。您必须将来自后端的响应字符串化，才能在前端使用该常量

---

希望这能有所帮助。

我不认为将CSS变量放在后端是个好主意。有更好的解决方案来处理应用程序的主题化

其中之一是：。 使用样式化组件，您可以创建多个主题，并根据需要利用环境变量在它们之间切换

在后端使用css需要您发出请求，以便获得应用程序的基本样式。想想用户连接速度慢或者后端崩溃的情况

---

CSS应该由客户端处理。

最好在后台使用HTTP请求从服务器获取常量，该请求为您提供JSON，然后您可以在运行时在组件样式中使用

---

在服务器不工作或可能出现网络连接问题的情况下，不从服务器获取常量的可能性很低，在这种情况下，您可以使用前端的常量

JSON中常量响应的Api

{
    container:{
      "HOME_BACKGROUND_COLOR": 1,
      "ALTERNATIVE_HOME_BACKGROUND_COLOR": "tem2",
      "HOME_FONT_FAMILY": "934",
      "BORDER_COLOR": "#DDDDDD",
      "WARNING_COLOR": "#FFF300",
      "ALERT_COLOR": "#D52B1E"
    }
}

样式表

export default Constants;

        import constants from './constants'

        const styles = StyleSheet.create({
          container: {
            flex: 1,
            padding: 26,
            backgroundColor: HOME_BACKGROUND_COLOR,
            fontFamily: HOME_FONT_FAMILY,
            alignItems: "center",
            justifyContent: "flex-start"
          }
        });

代码

---

你不是在主标记中返回视图，而是调用request，这会导致在JSX代码中包含对象时出错。请告诉我的朋友，如果你知道的话，告诉我怎么做。我只知道一个月。

export default Constants;

        import constants from './constants'

        const styles = StyleSheet.create({
          container: {
            flex: 1,
            padding: 26,
            backgroundColor: HOME_BACKGROUND_COLOR,
            fontFamily: HOME_FONT_FAMILY,
            alignItems: "center",
            justifyContent: "flex-start"
          }
        });

import Constants from "./Constants"


        var apiResponse = {};

      getConstants = async () => {
        await fetch(environment.provider + `constants`, {
          method: "GET",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          }
        }).then(responseJSON => {
          apiResponse = responseJSON;
        }).catch(error => {
          console.log('Was an error: ', error)
        })
      }



    ComponentWillMount(){
        super();
        getConstants();
    }    




    render() {
        return (
          <View style={[Constants.styles.container,apiResponse.container]}>
            {...}
          </View>
        );
      }