項目中有時候需要一些三角形圖標，UI切圖也比較麻煩，這時候仿照CSS樣式可以寫出同樣的效果
先看效果

屏幕快照 2017-09-08 上午10.34.19.png

屏幕快照 2017-09-08 上午10.34.29.png

UI代碼如下

 <ScrollView style={styles.container}>

                <View style={styles.triangle_UP}/>
                <View style={styles.triangle_down}/>
                <View style={styles.triangle_left}/>
                <View style={styles.triangle_right}/>
                <View style={styles.triangle_top_right}/>
                <View style={styles.triangle_bottom_left}/>
                <View style={styles.triangle_bottom_right}/>
                <View style={styles.triangle_f}/>
            </ScrollView>

樣式代碼如下（核心就在樣式）

const styles = StyleSheet.create({
    container: {
        flex: 1,

        backgroundColor: '#F5FCFF',
    },

    triangle_UP:{
        width:0,
        height:0,
        borderLeftWidth:50,
        borderLeftColor:'transparent',
        borderRightWidth:50,
        borderRightColor:'transparent',
        borderBottomWidth:100,
        borderBottomColor:'red'
    },
    triangle_down:{
        marginTop: 20,
        width:0,
        height:0,
        borderLeftWidth:50,
        borderLeftColor:'transparent',
        borderRightWidth:50,
        borderRightColor:'transparent',
        borderTopWidth:100,
        borderTopColor:'red'
    },
    triangle_left:{
        marginTop: 20,
        width:0,
        height:0,
        borderTopWidth:50,
        borderTopColor:'transparent',
        borderRightWidth:100,
        borderRightColor:'red',
        borderBottomWidth:50,
        borderBottomColor:'transparent'
    },
    triangle_right:{
        marginTop: 20,
        width:0,
        height:0,
        borderTopWidth:50,
        borderTopColor:'transparent',
        borderLeftWidth:100,
        borderLeftColor:'red',
        borderBottomWidth:50,
        borderBottomColor:'transparent'
    },
    triangle_top_right:{
        marginTop: 20,
        width:0,
        height:0,
        borderLeftWidth:100,
        borderLeftColor:'transparent',
        borderTopWidth:100,
        borderTopColor:'red',
    },
    triangle_bottom_left:{
        marginTop: 20,
        width:0,
        height:0,
        borderRightWidth:100,
        borderRightColor:'transparent',
        borderBottomWidth:100,
        borderBottomColor:'red',
    },
    triangle_bottom_right:{
        marginTop: 20,
        width:0,
        height:0,
        borderLeftWidth:100,
        borderLeftColor:'transparent',
        borderBottomWidth:100,
        borderBottomColor:'red',
    },
    triangle_f:{
        marginTop: 20,
        width:0,
        height:0,
        borderTopWidth:100,
        borderTopColor:'red',
        borderRightWidth:100,
        borderRightColor:'transparent',

    },

});