Question

我正在并行学习React Native课程和NodeJS课程。在ReactJS课程中，“教授”展示了如何在React Native中制作一个带有常量的文件，并在需要的地方分发这些常量。

在前端的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',
}

然后在我需要的一个文件中，将一个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>
    );
  }

和constants.js中：

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;

但是在这一行我得到了错误：{getConstants（）}

Invariant Violation: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

我不知道该怎么办。

我做错了吗？

Answer 1

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"
          }
        });

代码

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>
        );
      }

Answer 2

如果常量来自后端，它将变为JSON。您必须def users_list_or_detail(request, optional_value=None): if optional_value: # render detail else: # render list整理后端的响应，才能在前端使用该常量。

希望这会有所帮助。

Answer 3

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

其中之一是：https://github.com/styled-components/styled-components。使用styled-components，您可以创建多个主题，并根据需要使用环境变量在它们之间进行切换。

在后端具有CSS要求您发出请求，以获取应用程序的基本样式。考虑一下用户连接速度慢或后端崩溃的情况。

CSS应该由客户端处理。

Answer 4

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

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

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

4 个答案: