如何在React Native中实现中间带圆点的分隔线？

你要实现的是左右带横线、中间嵌入文字的分隔线，下面给你几种实用的实现方案：

方法1：Flex布局（推荐） #

这种方案简洁易维护，适配性强，代码如下：

<div class="separator">
  <span>示例文字</span>
</div>

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 1rem 0;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ccc; /* 可调整横线颜色、粗细 */
}

.separator span {
  padding: 0 1rem; /* 控制文字与横线的间距 */
  color: #666; /* 调整文字颜色 */
  font-size: 1rem;
}

通过flex布局让两侧伪元素自动占满剩余空间，中间文字自然居中，修改样式参数就能快速适配不同页面风格。

方法2：结合<hr>标签与绝对定位 #

如果需要保留<hr>的语义化，可采用这种方式：

<div class="hr-separator">
  <hr>
  <span>示例文字</span>
</div>

.hr-separator {
  position: relative;
  text-align: center;
  margin: 1rem 0;
}

.hr-separator hr {
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
}

.hr-separator span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; /* 背景色需与页面背景一致，用于覆盖横线 */
  padding: 0 1rem;
  color: #666;
}

利用绝对定位将文字精准定位在横线中间，通过背景色覆盖下方的横线，满足语义化需求。

方法3：纯内联样式（快速原型场景） #

如果只是临时快速实现，可直接使用内联样式：

<div style="display:flex;align-items:center;width:100%;margin:1rem 0;">
  <div style="flex:1;border-bottom:1px solid #ccc;"></div>
  <span style="padding:0 1rem;color:#666;">示例文字</span>
  <div style="flex:1;border-bottom:1px solid #ccc;"></div>
</div>

内容的提问来源于stack exchange，提问作者Matias Russo