RN 代码写不同方向的三角形

项目中有时候需要一些三角形图标，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',

    },

});