如何在react native中创建一个在两个视图之间重叠各半的带圈图像？

import React from 'react';
import { View, ImageBackground } from 'react-native';

const App = () => {
  return (
    <ImageBackground
      source={require('./path/to/image.jpg')}
      style={{ flex: 1 }}
    >
      {/* 在这里添加其他组件 */}
    </ImageBackground>
  );
};

export default App;

import React from 'react';
import { View, ImageBackground } from 'react-native';

const App = () => {
  return (
    <ImageBackground
      source={require('./path/to/image.jpg')}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 0.5, backgroundColor: 'red' }} />
      <View style={{ flex: 0.5, backgroundColor: 'blue' }} />
    </ImageBackground>
  );
};

export default App;

import React from 'react';
import { View, Image, ImageBackground } from 'react-native';

const App = () => {
  return (
    <ImageBackground
      source={require('./path/to/image.jpg')}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 0.5, backgroundColor: 'red' }}>
        <Image
          source={require('./path/to/circle.png')}
          style={{ width: 100, height: 100, borderRadius: 50 }}
        />
      </View>
      <View style={{ flex: 0.5, backgroundColor: 'blue' }} />
    </ImageBackground>
  );
};

export default App;