taro/src/components/basic/GradientText.tsx

import React from "react";
import { Text } from "react-native";
import MaskedView from "@react-native-masked-view/masked-view";
import LinearGradient from "react-native-linear-gradient";
import { ColorType } from "@/context/themes/color";
import { View } from "@tarojs/components";

const GradientText = (props) => {
  return (
    <View onClick={()=>{
      if (props.onClick){
        props.onClick()
      }
    }}>
      <MaskedView maskElement={<Text {...props} />}>
        <LinearGradient
          colors={[props.start ? props.start : ColorType.fast, props.end ? props.end : ColorType.sleep]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        >
          <Text {...props} style={[props.style, { opacity: 0 }]} />
        </LinearGradient>
      </MaskedView>
    </View>
  );
};

export default GradientText;