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