ReactNative实现文本渐变

我们直接上图,可以看到上面文本的效果,使用SVG实现

1.首先还是要引入react-native-svg库

2.使用该库下面的LinearGradient和Text

好,话不多说,我们看具体代码

复制代码
      <Svg width={422} height={30} viewBox={'0 0 422 30'}>
          <Defs>
            <LinearGradient
              id="Gradient"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2={constNumberStyle[422]}
              y2="0">
              <Stop offset="0" stopColor={'rgba(49,122,247,1)'} />
              <Stop offset="1" stopColor={'rgba(255,123,76,1)'} />
            </LinearGradient>
            <Text
              id="Text"
              x={211}
              y={24}
              dominant-baseline="middle"
              fontSize={28}
              textAnchor="middle">
              文字是渐变色
            </Text>
          </Defs>
          <Use href="#Text" fill="url(#Gradient)" />
        </Svg>
相关推荐
诚实可靠王大锤15 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
三思而后行,慎承诺3 天前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
木西5 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(永续合约交易-前端部分)
react native·web3·智能合约
歪歪1005 天前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
带娃的IT创业者5 天前
《AI大模型应知应会100篇》第68篇:移动应用中的大模型功能开发 —— 用 React Native 打造你的语音笔记摘要 App
人工智能·笔记·react native
sylvia_08155 天前
react native 初次使用Android Studio 打包
android·react native·android studio
索马里亚纳海参炒贩5 天前
useCallback useMemo memo 三个区别和作用
前端·react native
冰冷的bin6 天前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
懒人村杂货铺7 天前
[特殊字符] 跨端视频通话实战:腾讯云 TRTC + IM(React Native & Web)
react native·音视频·腾讯云