如何在纸张的FAB组件中应用背景渐变？

Question

可以使用 https://github.com/react-native-linear-gradient/react-native-linear-gradient?

在论文的 FAB 组件中应用渐变背景

或者是否有另一种方法可以在fab中应用渐变背景，或者它只接受纯色？

https://callstack.github.io/react-native-paper/fab.html

编辑： 我以某种方式解决了它。

我放了线性渐变，但是没有子项，我用CSS解决了它。

渐变格式与 Fab 相同且位于顶部，FAB.Group 具有透明背景和标高：99

Answer 1

万一有人偶然发现这个问题，有效的方法有点hacky，但可以完成工作。您可以添加一个位于 FAB 下方的 LinearGradient 元素。

例如，在您的父组件中，我在 FAB 按钮下方使用了

LinearGradient

，并通过将其包装在另一个视图中来添加阴影...

import { Portal } from "react-native-paper";
import ActionButton from "./ActionButton";

export default function ParentComponent() {
  return (
    <Portal.Host>
      <View style={{ flex: 1 }}>
        <ScrollView
          style={{
            flex: 1,
          }}
        >
        ....your content here
        </ScrollView>
        <View
          style={{
            ...styles.fabBase,
            ...styles.fabWrapper,
            overflow: "visible",
          }}
        >
          <LinearGradient
            style={{
              ...styles.fabBase,
            }}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}
            colors={["#1BE68C", "#00C0FF"]}
          />
        </View>
        <ActionButton />
      </View>
    </Portal.Host>

const styles = StyleSheet.create({
  fabBase: {
    width: 56,
    height: 55,
    borderRadius: 8,
  },
  fabWrapper: {
    position: "absolute",
    right: 15.5,
    bottom: 50,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 1,
    shadowRadius: 20,
    elevation: 5,
  },
});

然后您的

ActionButton

组件可能如下所示 - 请注意

transparent

背景颜色。

import * as React from "react";
import { FAB } from "react-native-paper";

const ActionButton = () => {
  const [state, setState] = React.useState({ open: false });

  const onStateChange = ({ open }) => setState({ open });

  const { open } = state;

  return (
    <FAB.Group
      open={open}
      visible
      mode={"elevated"}
      fabStyle={{
        backgroundColor: "transparent",
      }}
      icon={open ? "close" : "plus"}
      actions={[
        { icon: "plus", onPress: () => console.log("Pressed add") },
        {
          icon: "star",
          label: "Star",
          onPress: () => console.log("Pressed star"),
        },
        {
          icon: "email",
          label: "Email",
          onPress: () => console.log("Pressed email"),
        },
        {
          icon: "bell",
          label: "Remind",
          onPress: () => console.log("Pressed notifications"),
        },
      ]}
      onStateChange={onStateChange}
      onPress={() => {
        if (open) {
          // do something if the speed dial is open
        }
      }}
    ></FAB.Group>
  );
};

export default ActionButton;