React Native 中不确定高度 View 上绘制两列圆圈

可以使用 flex 布局和绝对定位实现在一个不确定高度的 View 中画两竖排圆圈。具体实现如下：

在该 View 中添加一个 flex 布局的父容器，并设置 flexDirection 为 'row'，表示子元素排列方式为横向排列。
在 flex 布局的父容器中添加两个子元素，分别表示左右两个竖排圆圈。对于这两个子元素，可以使用绝对定位来确定它们的位置和大小。
对于左边的圆圈，设置它的 position 为 'absolute'，left 为 0，top 为 0，表示它在父容器的左上角。然后设置它的 width 和 height 为父容器高度的一半，borderRadius 为 50% 实现圆形。
对于右边的圆圈，同样设置它的 position 为 'absolute'，但是 left 为父容器宽度减去圆圈的宽度，top 为 0，表示它在父容器的右上角。然后设置它的 width 和 height 为父容器高度的一半，borderRadius 为 50% 实现圆形。
最后，在左右圆圈中间添加一条竖直的分割线，可以使用 View 组件实现。设置该分割线的 position 为 'absolute'，left 为左边圆圈的宽度，top 为 0，width 为 1，height 为父容器高度，表示它在左右圆圈中间。

完整代码如下：

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

const CircleView = () => {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: 'row', position: 'relative' }}>
        <View
          style={{ 
            position: 'absolute',
            left: 0,
            top: 0,
            width: '50%',
            height: '50%',
            borderRadius: 999,
            backgroundColor: 'red',
          }}
        />
        <View
          style={{ 
            position: 'absolute',
            left: '50%',
            top: 0,
            width: '50%',
            height: '50%',
            borderRadius: 999,
            backgroundColor: 'blue',
          }}
        />
        <View
          style={{ 
            position: 'absolute',
            left: '50%',
            top: 0,
            width: 1,
            height: '100%',
            backgroundColor: 'white',
          }}
        />
      </View>
    </View>
  );
};

export default CircleView;

注意事项：

如果该 View 有固定高度，则可以直接使用该高度来计算左右圆圈的大小和位置。
如果该 View 高度是不确定的，可以使用相对单位来设置左右圆圈的大小和位置，例如使用百分比或 flex 布局。
如果需要支持不同设备的屏幕尺寸，可以使用响应式布局来适应不同的屏幕尺寸。