如何为三元运算符的每个条件拥有两种不同的样式？

Question

我的应用程序有浅色模式和深色模式。我想根据用户是否在浅色或深色模式下使用应用程序来更改文本的颜色。灯光模式有两种独立的样式，写法如下：

            <Text style={[styles.chromatic, styles.noteTxt]}>{f + ''}</Text>

当将黑暗模式应用到我的代码时，我是这样写的：

            <Text style={theme === true ? [styles.chromatic, styles.darkNoteTxt] : [styles.chromatic, styles.noteTxt]}>{f + ''}</Text>

明暗来回切换时没有错误，但颜色没有变化。谁能告诉我为什么这不适用于每种条件的两种样式？我猜这是语法问题。任何帮助将不胜感激。

Answer 1

你的条件没有错，你可以检查一下主题值，是const还是state值（可以改变为true或false）？

但是，我相信更改主题作为您的代码可能不是最佳实践，否则您必须为要更改主题的每个标签编写条件。相反，我建议

const lightColors = {
  primary: 'white',
};
const DarkColors = {
  primary: 'black',
};

const mockMode = 'light';

export const colors = mockMode === 'light' ? lightColors : DarkColors;

用阶段值替换mockMode