React Native 实现带边框六边形时大六边形尺寸适配问题

解决方案 #

你当前使用的CSS六边形实现参数是固定比例的，只需要按比例放大外层六边形的所有尺寸，同时将外层所有部件的颜色统一设置为边框色即可实现均匀的边框效果，以下是修改后的样式代码（以2px厚度的边框为例）：

const styles = StyleSheet.create({
// 原有小六边形样式保持不变
  hexagon: {
    width: 100,
    height: 55
  },
  hexagonInner: {
    width: 100,
    height: 55,
    backgroundColor: 'rgb(1,121,111)'
  },
  hexagonAfter: {
    position: 'absolute',
    bottom: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 25,
    borderTopColor: 'rgb(1,121,111)'
  },
  hexagonBefore: {
    position: 'absolute',
    top: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 25,
    borderBottomColor: 'rgb(1,121,111)'
  },

// 修改后的外层边框六边形样式
  hexagon2: {
    width: 104, // 内层宽度100 + 2*边框厚度2
    height: 57.2 // 外层宽度 * 0.55
  },
  hexagonInner2: {
    width: 104,
    height: 57.2,
    backgroundColor: 'red' // 统一改为边框色
  },
  hexagonAfter2: {
    position: 'absolute',
    bottom: -26, // 负的上下边框宽度
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 52, // 外层宽度 / 2
    borderLeftColor: 'transparent',
    borderRightWidth: 52,
    borderRightColor: 'transparent',
    borderTopWidth: 26, // 外层宽度 * 0.25
    borderTopColor: 'red' // 统一改为边框色
  },
  hexagonBefore2: {
    position: 'absolute',
    top: -26, // 负的上下边框宽度
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 52, // 外层宽度 / 2
    borderLeftColor: 'transparent',
    borderRightWidth: 52,
    borderRightColor: 'transparent',
    borderBottomWidth: 26, // 外层宽度 * 0.25
    borderBottomColor: 'red' // 统一改为边框色
  }
});

自定义边框厚度方法 #

如果需要调整边框粗细，只需按以下公式修改外层六边形的参数即可：

• 外层总宽度 = 100 + 2 * 期望边框厚度
• 外层hexagon/hexagonInner高度 = 外层总宽度 * 0.55
• 上下三角左右边框宽度 = 外层总宽度 / 2
• 上下三角上下边框宽度 = 外层总宽度 * 0.25
• 上下三角top/bottom偏移值 = -上下三角上下边框宽度

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