如何在React Native中製作驚人的按鈕？

Question

我想製作一個按鈕，如下所示。 請幫幫我。

Answer 1

這裏有兩種方法可以做到這一點：

這一次使用skewX：

<View style={{ 
    width: 200, 
    height: 50, 
    borderWidth: 4, 
    borderColor: 'black', 
    // Uncomment this to see how it looks unclipped 
    overflow: 'hidden', 
    borderRadius: 10, 
    backgroundColor: 'white', 
    position: 'relative', 
    // These are to center the text 
    alignItems: 'center', 
    justifyContent: 'center', 
}}> 
    <View style={{ 
    width: 120, 
    height: 70, 
    position: 'absolute', 
    // These offsets were required because the transform 
    // would move them off the edges 
    right: -10, 
    top: -10, 
    backgroundColor: 'yellow', 
    borderLeftWidth: 5, 
    borderLeftColor: 'black', 
    transform: [{ 
     skewX: '-45deg', 
    }] 
    }} /> 
    <Text style={{ 
    backgroundColor: 'transparent', 
    fontSize: 20, 
    }}>Hello World</Text> 
</View> 

而這裏的使用rotateX其他方式：

<View style={{ 
    width: 200, 
    height: 50, 
    borderWidth: 4, 
    borderColor: 'black', 
    // Uncomment this to see how it looks unclipped 
    overflow: 'hidden', 
    borderRadius: 10, 
    backgroundColor: 'white', 
    position: 'relative', 
    // These are to center the text 
    alignItems: 'center', 
    justifyContent: 'center', 
}}> 
    <View style={{ 
    width: 100, 
    height: 150, 
    position: 'absolute', 
    // These offsets were required because the transform 
    // would move them off the edges 
    right: 10, 
    top: -30, 
    backgroundColor: 'yellow', 
    borderLeftWidth: 4, 
    borderLeftColor: 'black', 
    transform: [{ 
     rotate: '45deg', 
    }] 
    }} /> 
    <Text style={{ 
    backgroundColor: 'transparent', 
    fontSize: 20, 
    }}>Hello World</Text> 
</View> 

我喜歡旋轉法因爲歪斜會與對角線的邊框寬度混淆。