如何在React Native中涂抹视图的一部分？

import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { Svg, Defs, Mask, Rect } from 'react-native-svg';

class MaskView extends Component {
  render() {
    return (
      <Svg height="100%" width="100%">
        <Defs>
          <Mask id="mask" x="0" y="0" height="100%" width="100%">
            <Rect height="100%" width="100%" fill="white" />
            <Rect height="50%" width="100%" fill="black" />
          </Mask>
        </Defs>
        <Rect height="100%" width="100%" fill="blue" mask="url(#mask)" />
      </Svg>
    );
  }
}

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image source={require('./image.jpg')} style={styles.image} />
        <MaskView />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});