如何在React Native样式表中使用变量？全局颜色变量配置失效求助

嘿，我一眼就瞅出你代码里的问题啦！问题出在全局颜色变量的定义方式上——你误用了解构赋值的语法，可"#DDDDDD"就是个普通字符串，根本没法解构出PrimaryColor变量，这就导致你样式里引用的PrimaryColor其实是未定义的，自然不会生效咯。

下面给你两种靠谱的修复方案，选适合你的就行：

方案一：直接定义变量（最简写法） #

把变量定义改成普通的赋值语句，别用解构：

'use strict';
import { Dimensions } from "react-native";
import React, { StyleSheet } from 'react-native'; // 建议统一用ES6 import语法

// 直接定义全局颜色变量
const PrimaryColor = "#DDDDDD";

module.exports = StyleSheet.create({
  title_post:{
    padding: 20,
    color: PrimaryColor
  },
  button_share:{
    backgroundColor: PrimaryColor
  }
})

方案二：用对象统一管理全局样式（更易维护） #

如果以后要加更多全局变量（比如其他颜色、间距、字体大小），建议把它们放到一个对象里，方便后续统一维护：

'use strict';
import { Dimensions } from "react-native";
import React, { StyleSheet } from 'react-native';

// 全局样式变量集合
const GlobalVars = {
  colors: {
    primary: "#DDDDDD",
    secondary: "#FF5733" // 可以扩展更多颜色
  },
  spacing: {
    defaultPadding: 20
  }
}

module.exports = StyleSheet.create({
  title_post:{
    padding: GlobalVars.spacing.defaultPadding,
    color: GlobalVars.colors.primary
  },
  button_share:{
    backgroundColor: GlobalVars.colors.primary
  }
})

内容的提问来源于stack exchange，提问作者bdroid