Question

我已使用以下代码在本地本机中创建了一个三角形。

<View style={cardStyle.cardLeftNotch}></View>

cardLeftNotch: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderTopWidth: 7,
    borderRightWidth: 10,
    borderBottomWidth: 7,
    borderLeftWidth: 0,
    borderTopColor: 'transparent',
    borderRightColor: '#ffffff',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
    position: 'absolute',
    left: -10,
    top: 21,
    elevation: 4
}

但是，阴影不是三角形的。我正在使用Android手机进行测试。

Answer 1

我还没有使用过，但是我认为react-native-shadow可以做到。

但是，如果您想手动执行此操作，则无法仅凭android中的高程来雕刻阴影，因此必须手动创建每侧的阴影，这很麻烦。一种方法是在每侧创建一个阴影的view并旋转它们，然后将它们组合成一个三角形：

<View style={cardStyle.side1}></View>
<View style={cardStyle.side2}></View>
<View style={cardStyle.side3}></View>

side1: {
    width: 1,
    height: 50,
    left: 300,
    top: 21,
    elevation: 10,
    backgroundColor: 'rgba(0,0,0,0.01)',
    transform: [
        {
            rotate: '30deg'
        }
    ],
    position: 'absolute',
},

side2: {
    width: 50,
    height: 1,
    left: 300,
    top: 45,
    elevation: 10,
    backgroundColor: 'rgba(0,0,0,0.01)',
    transform: [
        {
            rotate: '60deg'
        }
    ],
    position: 'absolute',
},

side3: {
    width: 48,
    height: 1,
    left: 287,
    top: 70,
    elevation: 10,
    backgroundColor: 'rgba(0,0,0,0.01)',
    position: 'absolute',
},

Answer 2

一种简单的方法是使用filter属性，因为它考虑到阴影形状的透明度；

.tri {
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-top-width: 7px;
    border-right-width: 10px;
    border-bottom-width: 7px;
    border-left-width: 0px;
    border-top-color: transparent;
    border-right-color: #f88;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    left: 10px;
    top: 21px;
    
    filter: drop-shadow(4px 4px 1px #000);
}

<div class="tri"></div>

请注意，较大的阴影半径值或带有阴影的大元素可能会对性能产生不利影响，因此最好谨慎使用。

如何在React Native中将三角形盒阴影应用于三角形

2 个答案: