background - 在 react-native 的 Overlay 顶部创建一个透明圆圈

Question

来源:https://github.com/amlcurran/ShowcaseView
通过查看源码，有一些png .

设置背景颜色 rgba(0, 0, 0, 0.8)并在此之上创建圆形 View 根本行不通。

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

Answer 1

是的，可以为此使用 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;