React Nativeで驚くべきボタンを作る方法は？

Question

ボタンを以下のように作りたいです。 私を助けてください。ここで

Answer 1

それを行うには、2つの方法があります：

この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> 

私はローテーション方式を好みますスキューは対角線の境界線の幅を混乱させるためです。