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>

Но как выбрать один из нескольких стилей, что нам делать?

если операторы внутри не работают с JSX. Может кто-нибудь что-то предложить?

Заранее спасибо.

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

Я думаю, вы можете сделать это так

 <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',
        }
      }

Answer 3

Сделайте оператор if в javascript, сохраните результат в локальной переменной и используйте переменную в вашем JSX.