不变违规：提供的道具 'color' 无效

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

我刚刚用这段代码进行了测试，它可以正常工作，您可以查看 link expo-link.

我相信您正在使用 styles.myText 在其他组件（如 View 或其他组件）中，因此颜色不是那里的样式属性，因此会出现错误。检查一次。

更新：

你用引号存储这些颜色吗？还是您不提供引号：

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

}

或

export const COLORS = {
  red: #E90716,
 
}

随意 doubts.Hope 它有帮助

不变违规：提供的道具 'color' 无效

Invariant Violation: Invalid prop 'color' supplied

react-native

react-native-ios