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

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

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

圆形实现

<pre>
<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
}
})
</pre>
经过测试，发现在安卓机上，圆形中的数字不能上下居中，所以使用了paddingBottom:2，具体情况具体操作。

三角形实现

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