Búsqueda de sitios web

javascript - ¿Cómo se añade un fondo de degradado lineal a un botón de native-base?


Estoy tratando de encontrar una forma de utilizar el botón de Native Base, pero solo quiero que el fondo sea degradado. No parece que pueda encontrar la opción ni un buen punto de inyección en el código.

https://github.com/GeekyAnts/NativeBase/issues/37

Mi implementación actual se ve así, pero tiene un problema en que el botón es el texto y no toda el área.

import { Box, Button, IButtonProps, useThemeProps } from "native-base";
import React, { useCallback, useMemo, useState } from "react";
import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";


export const GradientButton = ({
  children,
  colorScheme = "primary",
  ...buttonProps
}: IButtonProps): JSX.Element => {
  const buttonThemeProps = useThemeProps("Button", buttonProps);


  const [pressed, setPressed] = useState(false);

  const handlePressIn = useCallback(
    (e: GestureResponderEvent) => {
      setPressed(true);
      if (buttonProps.onPressIn) {
        buttonProps.onPressIn(e);
      }
    },
    [buttonProps]
  );

  const handlePressOut = useCallback(
    (e: GestureResponderEvent) => {
      setPressed(false);
      if (buttonProps.onPressOut) {
        buttonProps.onPressOut(e);
      }
    },
    [buttonProps]
  );
  const colors = useMemo(
    () =>
      pressed
        ? [`${colorScheme}.500`, `${colorScheme}.600`]
        : [`${colorScheme}.400`, `${colorScheme}.500`],
    [pressed]
  );

  return (
    <Box
      {...buttonThemeProps}
      overflow="hidden"
      bg={{
        linearGradient: {
          start: [0, 0],
          end: [0, 1],
          colors,
        },
      }}
      onLayout={handleLayout}
      >
      <Button
        {...buttonProps}
        p="0"
        onLayout={handleLayout}
        bg="transparent"
        colorScheme={colorScheme}
        _pressed={{ bgColor: "transparent" }}
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
      >
        {children}
      </Button>
    </Box>
  );
};

Artículos relacionados