[react-native]如何实现蒙版效果

Question

我想在图像上实现圆形遮罩，所以我有这个观点：

<View style={{width:200,height:200}}>
    <Image source={this.state.photo} resizeMode='cover' style={{width:200,height:200,opacity:0.5}}/>
    <View style={{position:'absolute',left:50,top:50,width:100,height:100,borderRadius:50,opacity:0.8}}>
        <Image source={this.state.photo} resizeMode='cover' style={{width:200,height:200,marginLeft:-50,marginTop:-50}}/>
    </View>
</View>

但是面具是一个矩形，而不是一个圆圈，为什么？

Answer 1

这是一个已知的react-native android问题。掩码View实际上是一个圆圈，掩码内的Image视图不尊重包裹borderRadius的{​​{1}}。

https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android