如何在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>

我更喜欢旋转方法，因为倾斜会弄乱对角线的边框宽度。