在react-native的Overlay上创建一个透明圆圈

Question

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

rgba(0, 0, 0, 0.8)在此之上设置backgroundColor 并创建圆形视图根本行不通。

如何在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;

Answer 2

我遇到了同样的问题，我在这里询问并回答：React Native：不透明视图内的透明视图 您可以<View>使用透明backgroundColor和不透明创建borderColor，然后设置borderRadius所有尺寸，瞧