Question

我定义了颜色常量：

export const COLORS = {
  red: '#E90716',
  black: '#000000',
  // other colors
}

在组件文件中，我将其导入：

import {COLORS} from '../colors.js'

在组件中，我嵌套了Text元素，我想在其中应用红色：

return (
<View>
<Text>
        Blabla
        <Text
          style={styles.myText}>
          I am red.
        </Text>
      </Text>
</View>
);
...

const styles = StyleSheet.create({
  myText: {
    color: COLORS.red,
  },
});

但是当我运行该应用程序时，出现了错误：

Invariant Violation: Invalid prop 'color' supplied to `StyleSheet myText`: E90716

为什么会出错？如何为Text元素使用我定义为常量的颜色代码？

=====更新====

但是，如果我更改为使用硬编码的颜色代码，那么它将起作用。

例如

const styles = StyleSheet.create({
  myText: {
    color: 'red', 
  },
});

例如，如果我未在COLORS中使用十六进制代码，则它也可以工作

// it works as well!
export const COLORS = {
   red: 'red'
}

为什么？为什么我用十六进制值定义的颜色常数不起作用？

Answer 1

我刚刚使用此代码进行了测试，它可以正常工作，您可以检查链接expo-link。

我相信您在其他诸如View之类的组件中使用了styles.myText，因此color并不是样式属性，因此是错误的。请检查一次。

更新：

您是否用引号存储了这些颜色？还是您不给报价单？

App

或

export const COLORS = {
  red: '#E90716',

}

如有疑问，请放心。希望有帮助

永久违反：提供了无效的道具“颜色”

1 个答案: