【问题标题】:Image boarder with curved edges in React NativeReact Native 中带有弯曲边缘的图像边框
【发布时间】:2022-02-09 21:51:52
【问题描述】:

我需要设计一个带有弯曲边框的图像。 我试过了

borderBottomRightRadius: 50, borderBottomLeftRadius: 50

但这不是我想要的。 我需要类似于此参考图像中的背景图像

【问题讨论】:

标签: javascript android react-native


【解决方案1】:

您可以将此样式代码与比例一起使用,并且您有一个椭圆。宽度是屏幕宽度。您可以使用Dimensions API 获取它。

 const {width} = Dimensions.get('window');
    width: "100%",
    height: 200,
    borderBottomRightRadius: width / 2,
    borderBottomStartRadius: width / 2,
    transform:[{scaleX: 2}]

【讨论】:

  • 感谢您的回答,但是,当我使用调整大小模式属性(streatch、cover)来适应图像时,它不适合。
  • 你可以给你的图片一个 transform:[{scaleX: 0.5}] 。此外,在弯曲的 viev 内部。
猜你喜欢
  • 2020-01-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多