本地反应

时间:2016-10-24 14:44:00

标签: background react-native

enter image description here

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

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

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

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

enter image description here

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;

答案 3 :(得分:0)

您需要使用一些隐藏的本机视图(iOs,Android),并将内容包装在其中。 像这样: enter image description here

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