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>
           

 

转载于:https://www.cnblogs.com/lgp142332/p/7513440.html