69073C8D-43DC-4278-834F-665F71BCA933.png
如上圖所示缚忧，完全使用CSS樣式來(lái)設(shè)置圓形和三角形闪水，代碼如下：
圓形實(shí)現(xiàn)
<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
}
})
經(jīng)過(guò)測(cè)試球榆，發(fā)現(xiàn)在安卓機(jī)上禁筏，圓形中的數(shù)字不能上下居中篱昔，所以使用了paddingBottom:2州刽，具體情況具體操作。
三角形實(shí)現(xiàn)
<TouchableOpacity style={styles.button}>
<Text style={{color: '#f76260', fontSize: 16}}>活動(dòng)詳情</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'//左箭頭顏色
}
})
