我正在寻找创建< 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>组件的功能,只是胡椒在我自己的添加剂中影响颜色.我很想知道这将是多么逼真,也许是一些我没有考虑过(或者可能不知道)的陷阱.
我不是在寻找有人为我做这项工作,但我正在寻找一些实用技巧,一些关于在哪里寻找信息以及如何正确构建项目的想法,以便最后我可以分享回来对社区.谢谢！
你可以查看我的
react-native-text-gradient.它基于标准的rn< Text>组件并继承其所有属性.目前它不支持在Android上嵌套(例如,您不能将一个渐变节点放在另一个中),但是已经支持iOS嵌套.
