react native, linear gradient, react native ui, mobile ui design, expo

你可能遇到了两种情况。

要么你的屏幕看起来很平淡，缺乏完成感，想要一个背景或按钮，让它看起来像一个真正的产品，而不是一个草率的框架。要么你已经尝试添加一个React Native渐变效果，但现在你卡在了设置中，因为半数的例子使用Expo，而另一半假设是一个裸露的原生项目。

大多数教程在这里就停止了。组件API很简单。环境选择并不是。一个干净的线性渐变React Native设置，依赖于是否在Expo管理的工作流中，还是自己处理原生链接，库，和测试模拟。 colors 目录内容

为什么您的 React Native 应用程序需要渐变色
- 渐变色做得好的地方
选择您的路径：Expo vs Bare React Native 设置
UI 元素的核心渐变技术
使用动画使渐变色生动起来
- 一个感觉像原生应用程序的闪烁加载器
- 动画组件
性能、可访问性和平台特性
故障排除和最终最佳实践

为什么您的 React Native 应用程序需要渐变

许多移动 UI 都会因为同一个原因失败。布局是好的，间距是好的，字体是可接受的，但屏幕仍然感觉死。solid 填充使所有内容看起来像占位符，除非视觉系统做了大量工作。

A 线性渐变 React Native 它修复了组件中的很少code。它添加了深度，创建了各个部分之间的分隔，并为高优先级元素提供了清晰的视觉权重。一个好的渐变背景可以使登录屏幕看起来有意图。一个好的渐变按钮可以使主要动作显而易见，而不需要使用重影或过度的边框。

由 2019年，expo-linear-gradient和react-native-linear-gradient在React Native项目中出现了超过42%的比例,这表明渐变不是一个边缘效果，而是一个强大的信号。它们已经成为生产应用程序中的标准UI工具，而不是在最后添加的装饰，正如这个React Native渐变采用写手所述.

渐变的优势

创建深度： 一个只有一个平坦背景的屏幕看起来不完整。一个细微的从上到下的混合使表面看起来层次分明。
引导注意力： 主要CTA、引导卡和英雄标题在不添加视觉噪音的情况下脱颖而出。
替代图像资产： In many cases, a gradient gives you polish without shipping extra background images.

实用规则： 在界面层次感很重要的地方使用渐变效果。背景、英雄卡片、CTA表面和媒体覆盖层通常受益。表单域、密集列表和正文容器通常不需要。

在产品设计方面，也有一个角度。跨平台的团队已经花费时间来保持界面的一致性。如果这是您的堆栈的一部分，这些跨平台移动应用的UI和UX实践与相同的思维一致：减少资产，增加可重用的表面，视觉系统可以在屏幕上保持一致。

选择您的路径：Expo vs Bare React Native Setup

This is the fork that causes most of the pain. The rendering API feels almost identical in both libraries, but setup isn’t.

如果您在Expo管理的应用中，请使用 expo-linear-gradient。如果您在Bare React Native应用中，请使用 react-native-linear-gradient。除非您知道为什么要这样做，否则不要尝试模糊这些界限。

Expo管理和Bare React Native工作流程之间的比较 infographic，用于实现线性渐变。

Expo 配置

Expo 是更平滑的路径。安装非常简单，版本匹配由系统处理，您不需要考虑原生链接。

安装它如下：

npx expo install expo-linear-gradient

使用它如下：

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1d4ed8']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

当您想要快速设置、理性默认值和较少的原生边缘时，Expo 是正确的选择。同样，探索高级 Expo 工作流的团队经常会使用 Expo 自定义原生功能的开发客户端仅在管理路径无法满足应用需求时。

裸 React Native 配置

裸 React Native 给您直接的原生模块访问，但您需要承担粗糙的边缘。

安装包：

npm install react-native-linear-gradient

对于 iOS，安装 pods：

cd ios && pod install

基本使用：

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#111827', '#7c3aed']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

通常裸露的项目会出现问题

大多数教程中缺失的部分是测试和原生设置。根据这个Stack Overflow讨论摘要, 2024年至2025年Stack Overflow上关于这个话题的68%的帖子涉及裸露的React Native设置中的原生模块故障,并且同一来源指出Jest模拟和iOS CocoaPods冲突的问题会反复出现。

如果您在裸露应用中使用Jest，请添加以下内容：

// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';

jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);

并在Jest配置中引用该设置文件：

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.js'],
};

裸露的React Native对于渐变效果很好。它只是不会容忍不完整的设置。大多数故障不是视觉错误。它们是链接、pods或测试环境问题。

以下是实用的决策表格：

项目类型	库	最佳匹配
Expo管理的应用	`expo-linear-gradient`	最快的路径，少量设置
裸露的React Native应用	`react-native-linear-gradient`	全面的原生控制
裸露的应用程序，带有Jest+模拟	`react-native-linear-gradient` 必需的，以保持测试稳定	UI元素的核心渐变技术

一个常见的方法是反复使用相同的小型渐变模式集。背景。按钮。标题。如果这三个是固体的，你可以在很多屏幕上重复使用它们。

一名工作人员正在使用笔记本电脑，显示一个现代仪表板界面，带有多彩的渐变设计元素。

一个有用的认知模型是这个：

控制调色板

colors controls the palette
start 和 end 控制方向
locations 控制转场发生的位置

如果您的启动屏幕或引导屏幕使用了渐变色，那么它与本文中描述的更广泛的启动序列模式会产生很好的配色效果 React Native 启动屏幕指南.

全屏背景渐变

这是最简单也是最可重用的模式

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
// For bare RN, switch to:
// import LinearGradient from 'react-native-linear-gradient';

export default function WelcomeScreen() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1e293b', '#2563eb']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.container}
    >
      <View style={styles.content}>
        <Text style={styles.title}>Welcome back</Text>
        <Text style={styles.subtitle}>Your workspace is ready.</Text>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  title: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '800',
    marginBottom: 8,
  },
  subtitle: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 16,
  },
});

斜向混合通常比默认的垂直混合更具动感。因此 start={{ x: 0, y: 0 }} 和 end={{ x: 1, y: 1 }} 在屏幕主要是装饰性的时，是一个不错的默认选择

不要仅凭个人喜好选择颜色。测试它们在真实文本、图标和状态栏样式的背景下。Figma 中看起来不错的调色板可能会在内容覆盖它时立即失败

行为像按钮的渐变按钮

这里的常见错误是将触摸行为直接放置在渐变上，并忘记了禁用状态、按压反馈或填充一致性。保持按钮语义，让渐变成为视觉层。

import React from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

type Props = {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
};

export function GradientButton({
  title,
  onPress,
  disabled = false,
  style,
}: Props) {
  return (
    <Pressable onPress={onPress} disabled={disabled} style={style}>
      {({ pressed }) => (
        <LinearGradient
          colors={
            disabled
              ? ['#94a3b8', '#94a3b8']
              : pressed
              ? ['#7c3aed', '#2563eb']
              : ['#8b5cf6', '#3b82f6']
          }
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.button}
        >
          <Text style={styles.label}>{title}</Text>
        </LinearGradient>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 52,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  label: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },
});

对于按钮，水平渐变通常比对角线渐变更容易阅读。它保持了标签的稳定性，避免了使控件感觉倾斜的效果。

带有遮罩的渐变文本

这是这个集合中最闪亮的模式，适用于适度控制的情况。英雄标题、升级横幅和空状态标题是合适的候选项。段落文本不是。

当你需要一个颜色占据更多视觉空间时，颜色混合就变得很重要。如果混合效果看起来混浊，首先减少颜色的数量。通常这样做比调整每个停止的值更快地修复设计。 @react-native-masked-view/masked-view.

npm install @react-native-masked-view/masked-view

使用动画使渐变更生动

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

export default function GradientHeadline() {
  return (
    <View style={styles.container}>
      <MaskedView
        maskElement={
          <View style={styles.maskWrapper}>
            <Text style={styles.title}>Premium analytics</Text>
          </View>
        }
      >
        <LinearGradient
          colors={['#22c55e', '#06b6d4', '#3b82f6']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          locations={[0, 0.5, 1]}
        >
          <Text style={[styles.title, styles.hiddenText]}>Premium analytics</Text>
        </LinearGradient>
      </MaskedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  maskWrapper: {
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 34,
    fontWeight: '800',
    letterSpacing: -1,
  },
  hiddenText: {
    opacity: 0,
  },
});

locations 静态渐变给你一种光滑的效果。动态渐变给你反馈。

最实用的用途不是一个闪亮的背景。它是一个闪烁的加载器。这个效果告诉用户应用程序正在运行，数据正在传输，用户看到的布局是有意的，而不是破损的。

一只手拿着一部显示着一个光滑的移动银行应用程序仪表板的智能手机，背景使用了渐变设计。

一个闪烁的组件也可以与其他动画模式相互补充。如果你的应用程序已经使用了动画图标或加载器，这个效果会很好地与之搭配。

You'll need

然后创建文本遮罩： React Native 中的 Lottie 指南这对于决定何时使用渐变闪烁何时使用更丰富的动画资产有用。

native 感觉的闪烁加载器

最简单可靠的版本使用 react-native-reanimated 将渐变条移动到裁剪的占位符上。

如果您的应用程序中没有安装 Reanimated，请安装它，然后创建一个包装器 overflow: 'hidden'.

import React, { useEffect } from 'react';
import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(View);

type Props = {
  width?: number | string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
};

export function ShimmerPlaceholder({
  width = '100%',
  height = 16,
  borderRadius = 8,
  style,
}: Props) {
  const translateX = useSharedValue(-220);

  useEffect(() => {
    translateX.value = withRepeat(
      withTiming(220, {
        duration: 1200,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, [translateX]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <View
      style={[
        styles.container,
        { width, height, borderRadius },
        style,
      ]}
    >
      <AnimatedView style={[styles.shimmer, animatedStyle]}>
        <LinearGradient
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0)']}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.gradient}
        />
      </AnimatedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e5e7eb',
  },
  shimmer: {
    ...StyleSheet.absoluteFillObject,
    width: 220,
  },
  gradient: {
    flex: 1,
  },
});

在其中，

从左到右动画一个渐变层。

这项技术的关键在于，您并不是试图动画渐变定义本身。您正在动画一个渐变层，跨越一个静态占位符。这更简单，更容易理解，也通常在设备之间更稳定。

以下是该效果的可视化演练：

动画组件 父级需要 overflow: 'hidden', 或者闪烁会溢出圆角。
保持宽度窄小: 一个较小的动画层比整个表面更容易调节。
匹配底色到屏幕: 骨架加载器应该适应周围的布局，而不是像一个单独的控件。

动画渐变效果在用户几乎察觉不到时效果最佳。如果闪烁效果成为屏幕上最显眼的部分，它做得太多了。

性能、可访问性和平台特性

一旦渐变从演示屏幕进入生产环境，关注点就会改变。code仍然看起来简单，但渲染行为、可读性和平台一致性开始比初始效果更重要。

如果您正在更广泛地优化应用程序响应速度，这个移动应用程序性能优化指南与同样的思维模式相符：减少不必要的工作、在真实设备上测量并优化用户看到的表面。

性能检查表

本地渐变通常效率较高，但仍可能滥用它们。

优先使用渐变而不是大型装饰性图片： 它们通常更容易传输并适应多个屏幕尺寸。
避免堆叠许多全屏层： 一个背景渐变是可以的。几个重叠的半透明渐变加上模糊加上重度动画可能会很昂贵。
缓存可复用的组件： 如果在列表中使用渐变卡片，保持 props 稳定并避免由于未相关的父级状态而重新渲染它。

一个好的规则是保持渐变结构化，而不是过度使用。使用它们来定义表面，而不是每一行在密集的feed中。

可访问性检查表

渐变可以快速损害可读性，因为表面上的contrast会随着变化。

测试文本与最亮的区域： 如果白色文本仅在暗色背景下有效，那么它就不起作用了。
在需要时添加遮罩： 背景和文本之间的微妙暗色遮罩通常比更改整个调色板更好。
保留渐变文本用于大型显示文本： 它在标题中看起来很好。它不是小标签、辅助文本或任何任务完成所必需的选择。

检查渐变的最差情况点，而不是最漂亮的点。

平台特性清单

iOS 和 Android 通常在渐变上呈现相同的效果，但并非总是完美。

问题	通常有帮助的
渐变在不同平台上看起来不一样	使用更少的颜色和更明显的渐变点之间的contrast
圆角不裁切渐变	在容器上 `overflow: 'hidden'` 渐变完全不显示
检查宽度、高度或	首先 `flex: 1` 也要注意状态栏和安全区域的处理。模拟器中看起来平衡的渐变，在有 notch 设备上可能会感觉顶部重

排错和最终最佳实践

我会在项目笔记中保留的简短版本。

匹配库到工作流程：

对于 Expo 管理的应用 expo-linear-gradient 对于裸 React Native react-native-linear-gradient __CAPGO_KEEP_0__
保持梯度的目的性: 背景、CTA、覆盖层和英雄文本是强大的使用案例。
控制方向有意图: 水平按钮、斜角装饰背景、仅限大型文本的mask。
为内容而设计，而不是空白状态: 使用真实的副本、图标和状态栏处理进行测试。
将裸露的设置视为原生设置: Pods、链接和Jest mock不是可选细节。

三个常见的失败案例反复出现。

梯度未显示

原因：组件没有可见的大小。

修复：为其提供大小 flex: 1, 或者明确的高度，或者具有尺寸的父级。渐变没有布局盒子不会以任何有意义的方式渲染。

iOS 构建在安装后会中断

原因：pod 未安装或原生依赖图形不一致

解决方案：运行 pod install 在需要时清理构建文件夹，然后重建应用。在裸项目中，仅安装包通常不足以解决问题。 ios测试失败，native 模块错误

原因：Jest 正在尝试加载实际的 native 模块

解决方案：在 Jest 配置文件中

如果您从本指南中保留一个想法，那么保留这个：渐变本身很容易。生产就绪的设置是主要的努力。一旦您选择了适合应用架构的库，之后的所有事情都会变得更加可预测。 react-native-linear-gradient Fix: run react-native-linear-gradient/jest/linear-gradient-mock Fix: mock

with

如果您的团队开发混合移动应用，并希望推送 JavaScript、CSS、复制、配置和资产更新，而不必等待商店审查， Capgo 值得一看。它为 CapacitorJS 和 Electron 团队提供了受控的实时更新、发布渠道、回滚保护和发布可见性，而不必将您的部署过程变成一个黑盒。

Master Linear Gradient React Native: Beautiful UIs in 2026

Table of Contents