小编Zac*_*est的帖子

具有React Native的渐变文本组件

我正在寻找<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>组件的功能,并且只是为了影响颜色而添加自己的功能.我很想知道这会有多么现实,也许还有一些我没有考虑过(或者可能不知道)的陷阱.

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

react-native

8
推荐指数
1
解决办法
1726
查看次数

标签 统计

react-native ×1