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>
相关推荐
Joyee69111 小时前
RN 的初版架构——UI 布局与绘制
前端·react native
Joyee69112 小时前
RN 的初版架构——通信机制
前端·react native
GISer_Jing16 小时前
AI/CICD/Next/React Native&Taro内容
人工智能·react native·taro
小仙女喂得猪17 小时前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
千码君20162 天前
React Native::关于react的匿名函数
javascript·react native·react.js·匿名函数·usecallback·命名函数·记忆化函数
晨旭缘2 天前
从零搭建 React Native 到项目运行全记录(0.73.6 稳定版)
javascript·react native·react.js
sure2823 天前
react native中实现水印相机功能
react native
千码君20163 天前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
namehu3 天前
React Native 应用性能分析与优化不完全指南
android·react native·ios
全栈探索者3 天前
ReactNative开发实战——ReactNative 开发中的图标管理方案:基于 Iconfont 的自定义图标库实现
react native