Question

我正在寻找在React Native中创建<GradientText />组件的实用方向。我为web方面创建了这个，使用-webkit-background-clip和Webkit浏览器的CSS线性渐变，并为非webkit浏览器默认为SVG掩码（只支持两个颜色停止，webkit版本显然可以支持更多）

我想学习如何使用React Native执行此操作。这是我完成的标准：

支持两站式色彩渐变（超过两个，如果可以的话）。
渐变方向可以是任意角度或类似于＆＃34;到顶部＆＃34;，＆＃34;到底部＆＃34;，＆＃34;到左边＆＃34;或＆＃34;到右边＆＃34;。
应支持颜色不透明度，因此理想情况下，该组件可采用HEX颜色或RGBA颜色。

生成的API应如下所示：

<GradientText colors={['#313182', 'rgba(244,33,233,.5)']} direction='<to top> | <185deg>'>Hello!</GradientText>

这对我来说很棘手。我对iOS开发有足够的了解并且对Android开发没有任何了解，但对于iOS，似乎以下内容可行，但我不确定最佳实践：

对React Native的<Text>组件进行子类化。
为渐变图像创建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>

Answer 2

您可以查看我的react-native-text-gradient。它基于标准的rn <Text>组件并继承其所有属性。目前它不支持在Android上嵌套（例如，您无法将一个渐变节点放在另一个渐变节点中），但在iOS嵌套上已经支持。

具有React Native的渐变文本组件

2 个答案: