如何修改react-native-paper中FAB.Group组件的背景色

你直接给FAB.Group绑定的style属性会作用在组件外层容器上，这个容器就是FAB展开时的背景遮罩层，所以修改它的backgroundColor只会改变遮罩颜色，不会影响按钮本身，按以下方法即可实现需求：

修改主FAB按钮的背景色 #

用FAB.Group提供的fabStyle属性专门设置主按钮的样式，直接在组件上添加该属性即可，修改后的完整代码如下：

<FAB.Group
  style={styles.fab}
  // 新增fabStyle属性设置主按钮背景
  fabStyle={{ backgroundColor: '#你需要的颜色值' }}
  open={open}
  color={"#333366"}
  icon={open ? "plus" : "plus"}
  actions={[
    {
      icon: "alpha-r-circle",
      label: "Add Custom Room",
      onPress: () => navigation.navigate("Create Room"),
    },
    {
      icon: "television",
      label: "Add Appliance",
      onPress: () => navigateAddAppliance(),
      small: false,
    },
  ]}
  onStateChange={onStateChange}
/>

修改展开后子Action按钮的背景色 #

如果需要调整展开后的子按钮背景，直接在对应actions配置项里加style属性即可：

actions={[
  {
    icon: "alpha-r-circle",
    label: "Add Custom Room",
    onPress: () => navigation.navigate("Create Room"),
    // 配置当前子按钮的背景色
    style: { backgroundColor: '#你需要的颜色值' }
  },
  {
    icon: "television",
    label: "Add Appliance",
    onPress: () => navigateAddAppliance(),
    small: false,
    style: { backgroundColor: '#你需要的颜色值' }
  },
]}

内容的提问来源于stack exchange，提问作者Raiyan Khalil Shuvo