React Native Paper：如何单独放大FAB.Group图标及自定义图标文本样式

嘿，我来帮你搞定这两个React Native Paper FAB.Group的问题，我之前也踩过类似的坑！

React Native Paper的FAB默认图标尺寸是固定的，但我们完全可以通过自定义图标渲染逻辑来单独调整大小，不用动FAB的整体样式。具体来说，就是把每个action里的icon从字符串改成一个函数，返回一个带自定义尺寸的图标组件就行。

举个实际的代码例子：

import { FAB, Icon } from 'react-native-paper';

// 你的组件内部
<FAB.Group
  open={open}
  icon="menu"
  actions={[
    {
      // 这里直接返回Icon组件，设置你想要的size
      icon: () => <Icon source="plus" size={32} />,
      label: 'Add',
      onPress: () => console.log('Add'),
    },
    {
      icon: () => <Icon source="star" size={32} />,
      label: 'Favorite',
      onPress: () => console.log('Favorite'),
    },
  ]}
  onStateChange={({ open }) => setOpen(open)}
  onPress={() => setOpen(!open)}
/>

这样每个图标都能单独设置大小，完全不会影响其他元素，简单又有效！

你遇到的问题应该是直接给FAB设置了style的宽高，导致内部布局挤压图标，同时文本也跟着被放大了。解决的关键是把图标和文本的样式控制完全分开：

1. 图标大小：还是用上面的方法，在renderIcon里给图标直接设置size，不要通过FAB的宽高来控制图标显示。
2. 文本尺寸：用FAB的labelStyle属性单独锁定文本的字体大小，比如保持默认的14号字（你也可以根据需求调整）。
3. 避免图标遮挡：如果图标变大后被裁剪，可以给FAB的style加一点内边距，或者调整minWidth，给图标足够的显示空间。

看这个修正后的代码示例：

import { FAB, Icon } from 'react-native-paper';

<FAB.Group
  open={open}
  icon="menu"
  actions={[
    {
      icon: () => <Icon source="plus" size={32} />, // 图标设为32px
      label: 'Add',
      labelStyle: { fontSize: 14 }, // 强制文本保持原有尺寸
      style: { paddingHorizontal: 8 }, // 加内边距防止图标被遮挡
      onPress: () => console.log('Add'),
    },
    {
      icon: () => <Icon source="star" size={32} />,
      label: 'Favorite',
      labelStyle: { fontSize: 14 },
      style: { paddingHorizontal: 8 },
      onPress: () => console.log('Favorite'),
    },
  ]}
  onStateChange={({ open }) => setOpen(open)}
  onPress={() => setOpen(!open)}
/>

额外提醒：别给FAB的style设置固定宽高，因为FAB内部是flex布局，固定宽高会破坏原有布局逻辑。如果需要调整FAB的整体大小，可以用style里的minWidth和minHeight，但一定要确保给图标留够显示空间哦！

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