android - React Native - 选择多种样式

Question

使用 React.js，我们可以使用类在多种样式中进行选择，如下所示:

           <div
              className={
                `r-n-cal-day 
                ${i % 7 == 6 ? classes.weekend : ''}
                ${classes.day} ${bsMonth !== this.props.viewBsMonth ? classes.dayMuted : ''} 
                ${this.isSameDate(adDate) ? classes.today : ''} 
                ${this.isSameDate(adDate, this.state.selectedDate) ? classes.selectedDay : ''} 
                `
              }
              key={`${bsDate} ${bsMonth}`}
              onClick={() => this.onDaySelect(adDate)}>
              {calFns.toDevanagariDigits(bsDate)}
            </div>

我试图在 React-Native 中实现这种选择样式的方式。

我可以使用三元运算符在两种样式中进行选择，如下所示:

        <Text style = { 
          index % 7 == 6 ? styles.weekend : styles.day_text
          }>
            {day.bsDate}
        </Text>

但是要在几种样式中选择喜欢的一种，我们应该怎么做呢？

内部的 if 语句不适用于 JSX。有人可以提出建议吗？

提前致谢。

Answer 1

您可以像这样将数组传递给您:

  <View style={[styles.powerblue,{marginLeft:10}]} />

可变样式:

const styles  = StyleSheet.create({
  powerblue:{width: 50, height: 50, backgroundColor: 'powderblue'},
  rightStyled:{marginRight:10},
});

这里它将应用来自样式和内联样式的样式，您可以传递其他样式表对象，例如:

 <View style={[styles.powerblue,{marginLeft:10},styles.rightStyled]} />

但右边的大多数属性将覆盖左边的属性。

例如如果 styles.powerblue 的 marginRight 属性为 0，并且 styles.rightStyled 的属性 marginRight 为 10。然后 marginRight 10 将被应用，因为它位于最右侧