Question

With React.js we could select among multiple styles using classes as follows:

           <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>

I was trying to achieve this way of choosing the style in React-Native.

I could choose among two styles using ternary operator as follows:

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

But to select like the one among several styles , what should we do?

if statements inside doesnot work with JSX. Can somebody suggest something ?

Thanks in advance.

Answer 1

您可以将Array传递给您的样式，例如：

  <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，因为它在最右侧

Answer 2

在javascript中执行if语句，将结果存储在本地变量中，然后在JSX中使用该变量。

Answer 3

我认为您可以这样做

 <View style={this.some(1)}></View>

对于样式（您可以根据需要对其进行自定义）

 some(s) {
        if(s===1)
        return {
            flex:1,
          borderRadius: 12,
         backgroundColor:'red',
        }
        else
        return {
            flex:1,
          borderRadius: 12,
         backgroundColor:'white',
        }
      }

React Native - Select multiple styles

3 个答案: