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>
相关推荐
冰冷的bin1 天前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
懒人村杂货铺1 天前
[特殊字符] 跨端视频通话实战:腾讯云 TRTC + IM(React Native & Web)
react native·音视频·腾讯云
木西2 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(流动性挖矿-前端部分)
react native·web3·智能合约
小妖怪的夏天2 天前
react native 出现 FATAL EXCEPTION: OkHttp Dispatcher
react native·react.js·okhttp
qczg_wxg3 天前
高阶组件介绍
开发语言·javascript·react native·ecmascript
qczg_wxg5 天前
React Native的动画系统
javascript·react native·react.js
qczg_wxg5 天前
React Native常用的API
react native
Winson℡5 天前
在 React Native 层禁止 iOS 左滑返回(手势返回/手势退出)
react native·react.js·ios
卸任5 天前
从0到1搭建react-native自动更新(OTA和APK下载)
前端·react native·react.js
wayne2145 天前
「原生 + RN 混合工程」一条命令启动全攻略:解密 react-native.config.js
android·react native