具有React Native的渐变文本组件

Question

我正在寻找<GradientText />在React Native 中创建组件的实用方向.我有这个为web方面创建的东西,使用-webkit-background-clipWebkit浏览器的CSS线性渐变和默认为非webkit浏览器的SVG掩码(它只支持两个颜色停止,webkit版本显然可以支持更多).

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

1. 支持两站式色彩渐变(超过两个,如果我能得到它).
2. 渐变方向可以是任意角度或诸如"顶部","底部","左侧"或"右侧"的字符串.
3. 应支持颜色不透明度,因此理想情况下,组件可采用HEX颜色或RGBA颜色.

生成的API应如下所示:

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

这对我来说很棘手.我对iOS开发有足够的了解并且没有任何关于Android开发的知识,但对于iOS,似乎以下可能有效,但我不确定最佳实践:

1. 子类<Text>React Native 的组件.
2. UIImage为渐变图像创建一个.
3. 将该图像用作渲染文本的图案填充.

像这样的东西.

然后我想在Android上使用aShader做同样的事情.再一次,我正在寻找有关如何实现这一目标的最佳实践.

最后,我的希望是我基本上可以继承所有<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>