React-Native中边框半径图像的自定义形状 [英] Custom shape for border radius image in React-Native

问题描述

我想在组件(边框底部)中重现该样式.我基本上是在加载矩形图像，然后在底部将其四舍五入.

I want to reproduce that style in my component (the border bottom). I am basically loading a rectangular image, then I want to rounded it at the bottom.

我在想:

• border-bottom-right-radius和left，但对于屏幕的自定义形状来说并不准确.
• 转换scaleX，但缩放图像比例(显然)
• 创建具有自定义形状的白色图像并将其加载到屏幕底部，但是我想在图像底部添加阴影...对于白色图像，我无法做到这一点...

有没有办法用React-Native来以合适的方式做到这一点?

Is there a way to do that in a proper style with React-Native ?

谢谢！

推荐答案

这是可能的，但是有点棘手.这个想法是，您需要创建可以应用形状的各种蒙版".之后，您可以将图像作为mask元素的子元素，这样它就可以基本上遮盖您想要的区域.可以采用动态大小来实现，但是我没有花时间提出该解决方案，我会把它留给您;)

This is possible, but it's a little tricky. The idea is you need to create a "mask" of sorts that you can apply the shape to. After doing that you can put the image as a child of the mask element so that it will essentially mask the area you want. It's probably possible to do it with a dynamic size, but I didn't take the time to come up with that solution, i'll leave that to you ;)

希望这会让您朝正确的方向前进.

Hopefully this'll get you going in the right direction though.

首先让我们设置应用程序结构

First lets setup the app structure

class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <Mask />
      </View>
    );
  }
}

非常简单，只是带有遮罩组件的基本应用程序.我将它作为一个组件，以便将来可以将道具传递给它(例如，图像uri).

Pretty straightforward, just a basic app with a mask component. I made it a component so you can pass props to it in the future (like the image uri for instance).

然后是面罩组件

const logoUri = `http://66.media.tumblr.com/86b941b3445b80a518ea51208f48ab35/tumblr_ntpi99a6Pl1uounv1o1_500.png`;
const Mask = (props) => (
  <View style={styles.maskContainer}>
    <View style={styles.mask}>
      <Image
        source={{ uri: logoUri }}
        style={styles.img}
      />
    </View>
  </View>
)

maskContainer 是一个定位元素，可帮助使图像居中.
mask 使用椭圆形方法，但是要使边缘不像边界半径那样圆滑，我们必须将其缩放2倍
img 样式需要反转缩放比例，以便图像本身不会变形:)

The maskContainer is a positioning element to help center the image.
The mask uses the oval style approach but to get the edges to not round like border radius, we have to scale it 2x
The img style needs to reverse the scaling so that the image itself is not warped :)

const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500,
    backgroundColor: "#e0e0e0",
    width: 700,
    height: 700
  },
  mask: {
    width: 200,
    height: 470,
    borderBottomLeftRadius: 100,
    borderBottomRightRadius: 100,
    overflow: "hidden",
    transform: [{ scaleX: 2 }]
  },
  img: {
    height: 470,
    width: 299,
    left: 25,
    position: "absolute",
    transform: [{ scaleX: 0.5 }, { translate: "-50%" }]
  },
  maskContainer: {
    position: "absolute",
    left: "50%",
    transform: [{ translate: "-50%" }]
  }
});

这篇关于React-Native中边框半径图像的自定义形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！