React Native中Text组件条件样式失效问题及解决方法

为什么Pressable生效、Text不生效？ #

• Pressable组件的style属性支持传入函数，函数可以根据变量或组件状态返回动态样式，所以你写的函数式条件样式能被正确解析。
• Text组件的style属性不支持函数类型，它只接受样式对象或样式数组。你给Text传了一个未执行的函数，组件无法识别这个值，导致样式不生效。

修复方法 #

直接去掉Text样式的函数包裹，把条件表达式的结果（样式对象）直接传给style属性：

修复后的代码：

<Pressable style={() => flagA == 0 ? styles.pressable_1 : styles.pressable_2}>
  <Text style={flagA == 0 ? styles.text_1 : styles.text_2}>{L5}</Text>
</Pressable>

如果有更复杂的样式逻辑，也可以提前在组件内部计算好样式变量，再传给Text：

// 组件内部提前计算样式
const textStyle = flagA === 0 ? styles.text_1 : styles.text_2;

// 使用计算后的样式
<Pressable style={() => flagA == 0 ? styles.pressable_1 : styles.pressable_2}>
  <Text style={textStyle}>{L5}</Text>
</Pressable>

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