可以使用Flex布局和borderRadius属性来实现。

首先,使用Flex布局将两个圆圈放在同一行,并使用justifyContent和alignItems属性将它们垂直居中。然后,使用borderRadius属性将圆圈变成圆形。

代码示例:

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
  <View style={{width: 20, height: 20, borderRadius: 10, backgroundColor: 'red', marginRight: 10}} />
  <View style={{width: 20, height: 20, borderRadius: 10, backgroundColor: 'red', marginLeft: 10}} />
</View>

其中,width和height属性设置圆圈的大小,borderRadius属性设置圆角半径,backgroundColor属性设置颜色,marginRight和marginLeft属性设置圆圈之间的间距。

在一个不确定高度的View中,可以将上述代码放入一个父View中,并设置父View的flex属性为1,让它占据整个容器的空间。

代码示例:

<View style={{flex: 1}}>
  <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
    <View style={{width: 20, height: 20, borderRadius: 10, backgroundColor: 'red', marginRight: 10}} />
    <View style={{width: 20, height: 20, borderRadius: 10, backgroundColor: 'red', marginLeft: 10}} />
  </View>
</View>

这样就可以在一个不确定高度的View中画两竖排圆圈填充这个容器了


原文地址: http://www.cveoy.top/t/topic/hv4b 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录