ReactNative寫三角形

reactNative

業務中氣泡常用三角寫法：

   <View style={styles.arrow}>
   </View>

   arrow: {
       width: getRpx(30),
       height: getRpx(30),
       borderWidth: getRpx(15),
       borderTopColor: 'transparent',
       borderRightColor: 'transparent',
       borderBottomColor: 'transparent',
       borderLeftColor: '#262626',
       justifyContent: 'center',
       alignItems: 'center',
   }

導航常用三角寫法：

    <View style={styles.arrow}>
       <View style={styles.inArrow}></View>
    </View>

    arrow: {
        width: getRpx(30),
        height: getRpx(30),
        borderWidth: getRpx(15),
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: '#262626',
        justifyContent: 'center',
        alignItems: 'center',
    }
    inArrow: {
        width: getRpx(22),
        height: getRpx(22),
        borderWidth: getRpx(11),
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: '#fff',
        position: 'absolute',
        left: getRpx(-12),
        top: getRpx(-9)
    }