css - React-Native 中边框半径图像的自定义形状

Question

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

我认为:

• border-bottom-right-radius 和 left，但与屏幕的自定义形状不准确。
• 变换 scaleX，但它缩放图像比例(显然)
• 创建一个带有自定义形状的白色图像并将其加载到屏幕底部，但我想在图像底部添加阴影...使用白色图像我无法做到...

有没有办法使用 React-Native 以适当的方式做到这一点？

谢谢!

Answer 1

这是可能的，但有点棘手。这个想法是你需要创建一个可以应用形状的各种“面具”。这样做之后，您可以将图像作为 mask 元素的子元素，以便它基本上遮住您想要的区域。可能可以使用动态大小来做到这一点，但我没有花时间想出那个解决方案，我会把它留给你；)

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

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

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

非常简单，只是一个带有 mask 组件的基本应用程序。我把它变成了一个组件，这样你以后就可以将 Prop 传递给它(例如图像 uri)。

然后是 mask 组件

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 是帮助图像居中的定位元素。
掩码 使用 oval style approach但是为了使边缘不像边界半径那样圆润，我们必须将其缩放 2 倍
img 样式需要反转缩放，这样图像本身就不会变形:)

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%" }]
  }
});

See it working on this fiddle!