本地反应

Question

来源：https://github.com/amlcurran/ShowcaseView 通过检查源代码，它有一些png。

设置backgroundColor rgba(0, 0, 0, 0.8)并在此基础上创建圆形视图根本不起作用。

如何在react-native中创建这样的Overlay？

Answer 1

我遇到了同样的问题，我在这里问过并回答：React native: transparent view inside opaque view 您可以使用透明<View>和非透明backgroundColor创建borderColor，然后设置borderRadius以及所有尺寸和瞧

Answer 2

使用具有以下规格的“查看”组件

• 蓝色背景：使用尽可能大的边框填充屏幕。
• 圆圈部分：边框内“视图”的“宽度”和“高度”。确保你使用borderRadius：'50％'或s.th来设置样式，使其成为圆形，背景是透明的。
• 使其位置绝对，并确保它位于另一个“视图”之上。

这只是一个想法，我还没有实现，但我认为这是可能的。

Answer 3

是的，可以为此目的使用react-native-svg。

您可以从我的代码中获取解决方案。我希望这会100％为您工作。

import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';
const WrappedSvg = () => (
    <View style={{ aspectRatio: 1 }}>
        <Svg height="100%" width="100%" viewBox="0 0 100 100">
            <Defs>
                <Mask id="mask" x="0" y="0" height="100%" width="100%">
                    <Rect height="100%" width="100%" fill="#fff" />
                    <Circle r="45" cx="50" cy="50" />
                </Mask>
            </Defs>
            <Rect height="100%" width="100%" fill="rgba(0, 0, 0, 0.5)" mask="url(#mask)" fill-opacity="0" />
        </Svg>
    </View>
);

export class index extends Component {
    render() {
        return (
            <View style={{ backgroundColor: '#FFFFFF', flex: 1, justifyContent: 'center', alignItems: 'center' }}>

                <View style={{ width: Dimensions.get('window').width, height: 300, position: 'absolute' }}>
                    <WrappedSvg />
                </View>
            </View>
        );
    }
}

export default index;

Answer 4

您需要使用一些隐藏的本机视图（iOs，Android），并将内容包装在其中。 像这样：

或者您可以使用我们的小型图书馆https://github.com/ibitcy/react-native-hole-view