style的一些不常见的属性
1、要画一个如图所示的虚线
style={{
width:100,
height:100,
justifyContent:"center",
alignItems:"center",
borderWidth:1, marginTop:10,
borderRadius:5,
borderColor:"red",
borderStyle:"dashed"
}}
2、画一个如图所示的三角
triangle:{
width:0,
height:0,
borderTopWidth:100,
borderTopColor:"red",
borderRightWidth:100,
borderRightColor:"transparent"
},
画一个正三角
<View style={{width: 0, height: 0, borderLeftWidth: 5, borderLeftColor:"transparent", borderRightWidth: 5, borderRightColor:"transparent", borderBottomWidth: 10, borderBottomColor:"red"}}> </View>
倒三角
<View style={{width: 0, height: 0, borderLeftWidth: 5, borderLeftColor:"transparent", borderRightWidth: 5, borderRightColor:"transparent", borderTopWidth: 10, borderTopColor:"red"}}> </View>
3、justifyContent用来指定水平方向上布局排版除"center","flex-satrt","flex-end"外还有两个值"space-between"
"space-around"。
space-between,这个可以让子元素被平均分布,第一子元素在容器最左边,最后一个子元素在最右边.
space-around可以让一列子元素均匀分布。
4、让view旋转180度
transform:[{rotate: '180deg'}]
示例
<Text style={{fontSize:14,color:"#b0b0b0",transform:[{rotate: '180deg'}] }}>扫我查看更多</Text>