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

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

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

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

生成的API应如下所示：

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

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

>对< Text>进行子类化React Native的组件.
>为渐变图像创建UIImage.
>将该图像用作渲染文本的图案填充.

像this这样的东西.

然后我想做同样的事情on Android using a Shader.再次,我正在寻找关于如何去做的最佳实践.

最后,我的希望是我基本上可以继承所有< Text>组件的功能,只是胡椒在我自己的添加剂中影响颜色.我很想知道这将是多么逼真,也许是一些我没有考虑过(或者可能不知道)的陷阱.

我不是在寻找有人为我做这项工作,但我正在寻找一些实用技巧,一些关于在哪里寻找信息以及如何正确构建项目的想法,以便最后我可以分享回来对社区.谢谢！