react-native 圆形、三角形样式实现

69073C8D-43DC-4278-834F-665F71BCA933.png

如上图所示，完全使用CSS样式来设置圆形和三角形，代码如下：

圆形实现

  1

const styles=StyleSheet.create({
    circle:{
    marginRight:10,
    alignItems:'center',
    justifyContent:'center',
    width: 28,
    height:28,
    backgroundColor:'#f76260',
    borderColor:'green',
    borderStyle:'solid',
    borderRadius:15,
    paddingBottom:2    
    }
})

经过测试，发现在安卓机上，圆形中的数字不能上下居中，所以使用了paddingBottom:2，具体情况具体操作。

三角形实现

      活动详情
      

const styles=StyleSheet.create({
    button:{
        height:40,
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center'    
    },
   arrow:{
       marginLeft:5,
       marginTop:1,
       width:0,
       height:0,
       borderStyle:'solid',
       borderWidth:6,
       borderTopColor:'#fff',//下箭头颜色
       borderLeftColor:'#f76260',//右箭头颜色
       borderBottomColor:'#fff',//上箭头颜色
       borderRightColor:'#fff'//左箭头颜色
   }
})