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>
相关推荐
天平4 小时前
react native现代化组件库的推荐 【持续更新...】
android·前端·react native
沐言人生7 小时前
RN学习笔记——1.RN环境搭建和踩坑
前端·react native
wen's2 天前
React Native安卓刘海屏适配终极方案:仅需修改 AndroidManifest.xml!
android·xml·react native
Misha韩2 天前
React Native 一些API详解
react native·react.js
小李飞飞砖2 天前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖2 天前
React Native 状态管理方案全面对比
javascript·react native·react.js
朝阳392 天前
ReactNative【实战系列教程】我的小红书 8 -- 我(含左侧弹窗菜单,右下角图标等)
react native
朝阳393 天前
ReactNative【实战系列教程】我的小红书 6 -- 购物(含商品搜索、商品分类、商品列表)
react native
Misha韩3 天前
React Native 基础组件详解<二>
react native·组件
朝阳394 天前
ReactNative【实战】瀑布流布局列表(含图片自适应、点亮红心动画)
react native