时间戳

首页 > 解决方案 > 以编程方式样式化元素

javascript - 以编程方式样式化元素

问题描述

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

起初，我是这样做的：

    <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迷路了，我不知道为什么？

谢谢

标签： javascriptcssreact-native

解决方案

其他 3 种样式中存在的样式字段将被style.submitText其他 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%',
}

推荐阅读