React Native 中组合View与箭头三角形组件时出现额外borderWidth问题

问题原因 #

这是border实现三角形的常见兼容问题，本质是高DPI显示屏下的半像素渲染误差：你通过border拼接出的三角形，本身边缘就存在亚像素级的模糊，当你给中间View添加内容触发布局重绘后，三个组件的边缘对齐出现半像素错位，就会漏出底层的背景色，看起来像多了1px的边框。

可直接落地的解决方案 #

• 首先删除三角形样式里多余的height配置
  border实现三角形完全靠四个边框的宽度撑起形状，额外设置height属性会让三角形内部出现多余的透明区域，进一步加大对齐误差。修改后的样式参考：

bodyContent: ({ primaryColor }, theme) => ({ padding: 4, backgroundColor: primaryColor, alignItems: 'center', overflow: 'hidden' }),
triangleRight: ({ color }, theme) => ({
  backgroundColor: 'transparent',
  borderStyle: 'solid',
  borderLeftWidth: ARROW_TRAINGLE_WIDTH,
  borderBottomWidth: 13,
  borderTopWidth: 13,
  borderLeftColor: color,
  borderTopColor: 'transparent',
  borderBottomColor: 'transparent'
}),
triangleLeft: ({ color }, theme) => ({
  position: 'relative',
  backgroundColor: 'transparent',
  borderStyle: 'solid',
  borderRightWidth: ARROW_TRAINGLE_WIDTH,
  borderBottomWidth: 13,
  borderTopWidth: 13,
  borderRightColor: color,
  borderTopColor: 'transparent',
  borderBottomColor: 'transparent'
})

• 给三角形增加微小偏移遮盖缝隙
  如果删除height后还有细线，给左右三角形加上偏移量，让三角形和中间View完全贴合：

// 左侧三角形样式内新增
transform: [{ translateX: 1 }]
// 右侧三角形样式内新增
transform: [{ translateX: -1 }]

• 应急快速修复方案
  不需要改现有组件样式，直接给三个组件的共同父容器设置和中间View一样的背景色，就算有错位缝隙漏出来也是同色，视觉上完全看不出问题。

• 长期最优方案
  如果后续还要调整箭头的大小、样式，建议直接用SVG绘制箭头，完全不会有border实现的各类渲染兼容问题，适配性也更强。

内容的提问来源于stack exchange，提问作者vicky keshri