代码之家 › 专栏 › 技术社区 › Tony

如何为三元运算符的每个条件设置两种不同的样式?

conditional-operator react-native

Tony · 技术社区 · 9 月前

我的应用程序有亮模式和暗模式。我想根据用户的应用程序是处于亮模式还是暗模式来更改文本的颜色。灯光模式有两种单独的样式,写如下:

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

当将黑暗模式应用于我的代码时,我是这样写的:

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

没有错误,但在浅色和深色之间来回切换时颜色没有变化。有人能告诉我为什么这不适用于每种情况的两种风格吗?我猜这是语法问题。任何帮助都将不胜感激。

1 回复 | 直到 9 月前

Suppose 9 月前

你的条件没有错,你能检查主题值吗?是const还是state值(可以更改为true或false)?

但是,我认为在代码中更改主题可能不是最佳做法,否则您必须为要更改主题的每个标记编写条件。相反,我建议

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

const mockMode = 'light';

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

将mockMode替换为stage值

推荐文章

Dglfwcfa · 将两个状态组合成一个,并将内容排序到嵌套对象中

5 月前

selcukctn · 如何在react native中制作无限动画?

5 月前

Bruno Nobre · 如何使组件只安装一次?

5 月前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

6 月前

MattJ · 无法处理javascript/react-native中null变量的情况