react.js - react native 如何通过数据设置背景色css

问题描述

问 题

下面时我写错的写法，有没有知道正确写法，我这样写最后只剩下背景色了，别的css都没有了，
我的目的时通过数据中的type，如果等于‘回’ 背景色蓝色， 如果不是颜色时‘绿色’ ，并且有一个基本的css.

//相关数据
constructor(props) {

super(props);
this.state = {uri:'http://img.eelly.com/G01/M00/00/44/small_o4YBAFMyPUmIGXvHAAFuz8d_UngAAAavQFku48AAW7n220.jpg', title: '【8成新】 PRADA 棕色飞鸟格 手拎包', price: '¥5500', type: '回', saleTime: '20170725 0800'}

}

//相关标签
<View style={styles.type} style={{backgroundColor:this.state.type=='回'?'blue':'green'}} ><Text style={{fontSize:10, color: 'black'}}>{this.state.type}</Text></View>

//相关css
type: {

width: 20,
height: 20,
borderWidth: 1,
borderRadius:10,
justifyContent: 'center',
alignItems: 'center'

},

解决方案

这样写
<View style={[styles.type,{backgroundColor:this.state.type=='回'?'blue':'green'}]} ><Text style={{fontSize:10, color: 'black'}}>{this.state.type}</Text></View>

这篇关于react.js - react native 如何通过数据设置背景色css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！