react-native - 带有 React Native 的渐变文本组件

Question

我正在寻找创建 <GradientText /> 的实用方向React Native 中的组件。我使用 -webkit-background-clip 为 Web 端创建了这个和Webkit浏览器的CSS线性渐变，非webkit浏览器默认为SVG mask (只支持两个色标，webkit版本显然可以支持更多)。

我想学习如何使用 React Native 做到这一点。这是我完成的标准:

支持两档颜色渐变(超过两个，如果我能得到的话)。

渐变方向可以是任意角度或字符串，例如“到顶部”、“到底部”、“向左”或“向右”。

应该支持颜色不透明度，因此理想情况下，组件可以采用 HEX 颜色或 RGBA 颜色。

生成的 API 应如下所示:
<GradientText colors={['#313182', 'rgba(244,33,233,.5)']} direction='<to top> | <185deg>'>Hello!</GradientText>
这就是我觉得棘手的地方。我对 iOS 开发足够了解，但对 Android 开发一无所知，但对于 iOS，似乎以下方法可行，但我不确定最佳实践:

子类 <Text> React Native 的组件。

创建一个 UIImage对于渐变图像。

使用该图像作为渲染文本的图案填充。

类似 this .

那么我想做同样的事情 on Android using a Shader .同样，我正在寻找有关如何进行的最佳实践。

最后，我希望我能基本继承所有 <Text>组件的功能，以及我自己添加的影响颜色的胡椒粉。我很想知道这有多现实，也许还有一些我没有考虑过(或者可能不知道)的陷阱。

我不是在找人为我做这项工作，而是在寻找一些实用的技巧，一些关于在何处查找信息以及如何正确构建项目的想法，以便最终我可以将其分享回来到社区。谢谢!

Answer 1

使用 @react-native-community/masked-view 在文本上实现渐变和 react-native-linear-gradient
1.

import React from "react";
import { Text } from "react-native";
import MaskedView from "@react-native-community/masked-view";
import LinearGradient from "react-native-linear-gradient";
    
const GradientText = (props) => {
  return (
    <MaskedView maskElement={<Text {...props} />}>
      <LinearGradient
        colors={["red", "green"]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
      >
        <Text {...props} style={[props.style, { opacity: 0 }]} />
      </LinearGradient>
    </MaskedView>
  );
};

export default GradientText;

<GradientText style={styles.textStyle}>Hello world</GradientText>