以编程方式样式化元素答案

【问题标题】：programmatically styling elements以编程方式样式化元素
【发布时间】：2020-05-18 18:51:28
【问题描述】：

大家好，我有一个元素，我想有条件地应用多种样式

起初，我是这样做的：

    <Text
        style={[
          discountCodeState === '' || !isActiveHandler(value)
            ? [
                style.submitText,
                isActiveHandler(value) ? style.submitTextActive : null,
              ]
            : discountCodeState === 'success'
            ? [style.submitText, style.submitTextSuccess]
            : [style.submitText, style.submitTextError],
        ]}
      >
        {submitText}
      </Text>

这工作正常，但有很多冗余代码，所以我将其重构为：

   <Text
        style={[
          style.submitText,
          discountCodeState === '' && isActiveHandler(value)
            ? style.submitTextActive :
             discountCodeState === 'success'
            ?  style.submitTextSuccess
            :  style.submitTextError,
        ]}
      >
        {submitText}
      </Text>

但是由于某种原因style.submitText不知何故迷路了，我不知道为什么？？

谢谢

【问题讨论】：

在你的第一个逻辑中，当应用style.submitText 时，它后面只有style.submitTextActive 或null 但是在第二个中你首先添加style.submitText 然后做一些逻辑来应用其他我怀疑会覆盖style.submitText 的样式

标签： javascript css react-native

【解决方案1】：

style.submitText 和其他 3 种样式中存在的样式字段将被其他 3 种覆盖。当您将相同的样式文件放入样式数组时，最后一个字段将被覆盖。

示例：

const styles=StyleSheet.create({
  style1: {
    backgroundColor:'blue',
    width:'100%',
    height:'50%',
    ...
  },
  style2: {
    backgroundColor:'red',
    width:'50%',
    ...
  },
  style3: {
    backgroundColor:'green',
   ...
  },
});

<View style={[styles.style1, styles.style2, styles.style3]}/>

您的视图样式将具有：

{
    backgroundColor:'green',
    width:'50%',
    height:'50%',
}

【讨论】：