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

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

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

圆形实现

<View style={styles.circle}>
  <Text style={{fontSize:19,textAlign:'center',color:'#fff'}}>1</Text>
</View>

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，具体情况具体操作。

三角形实现

<TouchableOpacity style={styles.button}>
      <Text style={{color: '#f76260', fontSize: 16}}>活动详情</Text>
      <View style={styles.arrow}></View>
</TouchableOpacity>

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'//左箭头颜色
   }
})