在react-native中的叠加层上创建一个透明的圆圈

ckocjqey  于 2023-01-18  发布在  React
关注(0)|答案(3)|浏览(187)

Source:https://github.com/amlcurran/ShowcaseView通过检查源代码,它有一些png
设置backgroundColor rgba(0, 0, 0, 0.8)并在其上创建圆形视图根本不起作用。
如何在react-native中创建这样的叠加?

h79rfbju

h79rfbju1#

溶液1:

您可以使用react-native-hole-view封装来实现这种类型的孔

import { RNHoleView } from 'react-native-hole-view';

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text style={{ flexGrow: 0, flex: 0, padding: 10 }}>{"Wow! I'm a text inside a hole!"}</Text>
  <TouchableOpacity onPress={() => {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
    <Text>{"Wow! I'm a button inside a hole!"}</Text>
  </TouchableOpacity>
  <ScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}>
    <Text numberOfLines={1}>
      {
        "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
      }
    </Text>
  </ScrollView>
  <RNHoleView
    style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(34,146,231,0.4)' }}
    holes={[{ x: 150, y: 390, width: 120, height: 120, borderRadius: 60 }]}>
  </RNHoleView>
</View>

溶液2:

yes可以使用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;
2cmtqfgy

2cmtqfgy2#

我有同样的问题,我问,并在这里回答:你可以用透明的backgroundColor和非透明的borderColor创建<View>,然后设置borderRadius和所有的大小,瞧

cngwdvgl

cngwdvgl3#

你需要使用一些屏蔽的原生视图(iOS,Android),并将你的内容 Package 在其中。

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

相关问题