react-native - 你如何屏蔽具有任何形状的 react-native <View/> ?

标签 react-native

似乎 react-native 中的所有组件都是矩形或圆角矩形(也可以表示圆形)。

你如何屏蔽<View />像六边形这样的任意形状?

最佳答案

我得出的结论是这个特性不是开箱即用的,所以我在 Objective-C 中实现了一个名为 的原生组件。 react-native-masked-view .

basic idea是使用 mask UIView 类的属性:

CALayer *mask = [CALayer layer];
mask.contents = (id)[_maskUIImage CGImage];
mask.frame = self.bounds; //TODO custom: CGRectMake(left, top, width, height);
self.layer.mask = mask;
self.layer.masksToBounds = YES;

它在 JavaScript 中是这样工作的:
<MaskedView maskImage="mask.png">
   ...
</MaskedView>

关于react-native - 你如何屏蔽具有任何形状的 react-native <View/> ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30560909/

相关文章:

android - React native - 确保你的包被正确打包或者你正在运行打包服务器 Release模式

react-native - 为 react 原生 TextInput 设置边框

android - react native 图像缓存 Android

javascript - React Native 应用程序显示错误,指出即使提供 key 后 key 也将未定义

javascript - 使用 useNativeDriver react 原生动画 - _reactNative.Animated.event(...) 不是函数

reactjs - 开玩笑+@testing-library/react-native错误: ReferenceError: You are trying to `import` a file after the Jest environment has been torn down

node.js - 在 React Native 和 NodeJS 后端使用 Google 登录

react-native - 样式化 NativeBase 输入

react-native - 如何使用wix/react-native-navigation在largeTitle下方添加搜索栏?

javascript - 如何使用 React Native 中的 React Native 元素库中的复选框从平面列表中选择多个项目?