React Native中自定义图标搭配Badge在FooterTab中显示异常

看起来你遇到的问题是Button自带的badge属性和自定义图标组件不兼容导致的位置错误——毕竟这个属性通常是为框架内置的图标组件做的适配，而你的CustomIcon是自定义字体实现的，布局结构和内置图标不一样，所以Badge的定位逻辑失效了。

给你两个可行的解决方案，亲测有效：

方案一：手动控制Badge的绝对定位 #

放弃Button的badge属性，自己用相对+绝对定位来精准控制Badge的位置，这样完全不受内置逻辑的限制：

<Button vertical>
  {/* 用一个相对定位的容器包裹图标和Badge */}
  <View style={{ position: 'relative', width: 30, height: 30 }}>
    <CustomIcon style={{ fontSize: 30 }} name='logros_desactivada' />
    {/* 通过top/right调整Badge的偏移位置，适配你的图标大小 */}
    <Badge style={{ position: 'absolute', top: -4, right: -4 }}>
      <Text>8</Text>
    </Badge>
  </View>
  <Text> Logros </Text>
</Button>

这里给容器设置固定宽高是为了让Badge的定位基准更稳定，你可以根据自己图标的实际尺寸调整数值。

方案二：优化CustomIcon的布局属性 #

如果不想改Button的结构，那可以检查你的CustomIcon组件封装，确保它的盒模型和内置图标一致，让Button的badge属性能正确识别它的位置：

假设你的CustomIcon是基于Text组件封装的，给它加上这些样式：

const CustomIcon = ({ name, style }) => {
  return (
    <Text style={[styles.customIcon, style]}>{/* 这里是你的图标Unicode */}</Text>
  );
};

const styles = StyleSheet.create({
  customIcon: {
    fontFamily: '你的自定义字体名',
    display: 'inline-block', // 确保元素有标准的盒模型
    alignSelf: 'center',
    lineHeight: 30, // 和图标fontSize一致，保证垂直对齐
  },
});

这样调整后，Button的badge属性应该能正确识别图标的边界，Badge的位置就正常了。

两种方案里，方案一更灵活，推荐优先尝试，毕竟自定义组件的布局差异很难完全和内置组件对齐。

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