使用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。有人可以建议吗?
提前致谢。
您可以将Array传递给您的样式,如:
<View style={[styles.powerblue,{marginLeft:10}]} />
变量样式:
const styles = StyleSheet.create({
powerblue:{width: 50, height: 50, backgroundColor: 'powderblue'},
rightStyled:{marginRight:10},
});
这里它将应用样式和内联stye的样式,你可以传递其他样式表对象,如:
<View style={[styles.powerblue,{marginLeft:10},styles.rightStyled]} />
但是大多数属性都会覆盖左边的属性。
例如如果styles.powerblue
的财产marginRight为0,而styles.rightStyled
的财产marginRight为10.那么marginRight 10将被应用,因为它在最右侧
在javascript中执行if语句,将结果存储在局部变量中,并在JSX中使用该变量。
我想你可以这样做
<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',
}
}