高级进阶 React Native 鸿蒙跨平台开发：LinearGradient 基础渐变代码指南

线性渐变（Linear Gradient）：沿直线方向的色彩过渡角度渐变：可以指定渐变方向和角度多色渐变：支持两个以上的颜色渐变// 渐变颜色数组start?// 渐变起始点end?// 渐变结束点locations?: number[];// 颜色位置数组useAngle?: boolean;// 是否使用角度angle?: number;// 渐变角度style?: any;// 自定义样式c

2601_94959365

318人浏览 · 2026-02-01 22:58:09

2601_94959365 · 2026-02-01 22:58:09 发布

在这里插入图片描述

一、渐变背景的核心原理

渐变背景是现代移动应用设计中的核心视觉元素，它能够为界面增添层次感和视觉吸引力。在 React Native for Harmony 中，我们使用 react-native-linear-gradient 库来实现跨平台的高质量渐变效果。

1.1 为什么需要渐变背景？

渐变背景在应用中扮演着重要角色：

视觉吸引力：色彩过渡让界面更加生动有趣
层次感：通过色彩渐变区分不同层级的内容
品牌识别：独特的渐变色彩可以增强品牌印象
引导用户：使用渐变引导用户的视线流动

1.2 渐变类型概述

在 React Native for Harmony 中，主要支持以下渐变类型：

线性渐变（Linear Gradient）：沿直线方向的色彩过渡
角度渐变：可以指定渐变方向和角度
多色渐变：支持两个以上的颜色渐变

1.3 实现原理

LinearGradient 组件的核心实现原理：

使用原生视图组件绘制渐变
通过 colors 属性定义渐变色的起始和结束颜色
通过 start 和 end 属性控制渐变方向
在 iOS、Android 和鸿蒙平台使用各自的原生渐变 API

1.4 安装与配置

在鸿蒙平台上使用 react-native-linear-gradient，需要先安装依赖：

npm install @react-native-ohos/react-native-linear-gradient

重要提示： 虽然安装的包名是 @react-native-ohos/react-native-linear-gradient，但在代码中导入时，库名保持不变：

import LinearGradient from "react-native-linear-gradient";

二、基础线性渐变实现

2.1 最简单的线性渐变

创建一个从上到下的垂直线性渐变是最基础的使用方式：

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

const BasicGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#4facfe', '#00f2fe']}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>基础渐变</Text>
    </LinearGradient>
  );
});

关键属性说明：

colors：渐变颜色数组，至少包含两个颜色值
第一个颜色：渐变起始颜色（上端）
第二个颜色：渐变结束颜色（下端）
默认方向：从上到下（垂直方向）

为什么这样设计？

数组形式：使用数组便于扩展多个颜色
默认垂直：符合大多数使用场景的习惯
简洁明了：最少只需两个属性即可实现渐变

2.2 TypeScript 类型定义

import LinearGradient from "react-native-linear-gradient";

interface LinearGradientProps {
  colors: (string | number)[];           // 渐变颜色数组
  start?: { x: number; y: number };  // 渐变起始点
  end?: { x: number; y: number };    // 渐变结束点
  locations?: number[];       // 颜色位置数组
  useAngle?: boolean;         // 是否使用角度
  angle?: number;             // 渐变角度
  style?: any;                // 自定义样式
  children?: React.ReactNode; // 子组件
}

类型设计要点：

colors 是必需属性，其他都是可选的
start 和 end 使用坐标点 {x, y}，范围是 0-1
locations 控制每个颜色的位置，范围是 0-1
angle 和 useAngle 用于角度渐变

注意： 根据官方文档，angleCenter 属性在鸿蒙平台上暂不支持。

2.3 样式实现

const styles = StyleSheet.create({
  gradientBox: {
    padding: 20,
    borderRadius: 12,
    margin: 16,
    minHeight: 150,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '600',
  },
});

样式说明：

borderRadius：圆角让渐变效果更柔和
minHeight：确保渐变区域有足够的高度
justifyContent 和 alignItems：内容居中显示
文字使用白色以适应深色渐变背景

三、多色渐变实现

3.1 三色渐变

使用三个颜色创建更丰富的渐变效果：

const ThreeColorGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#fa709a', '#fee140', '#fa709a']}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>三色渐变</Text>
    </LinearGradient>
  );
});

为什么这样设计？

色彩循环：首尾颜色相同，形成循环效果
柔和过渡：中间色使用亮黄色，增强过渡效果
视觉节奏：三个颜色创造出更丰富的视觉层次

3.2 多色渐变

使用四个或更多颜色创建复杂的渐变效果：

const MultiColorGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#667eea', '#764ba2', '#6B8DD6', '#8E37D7']}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>多色渐变</Text>
    </LinearGradient>
  );
});

多色渐变的特点：

颜色数组越长，渐变效果越丰富
颜色之间自动均匀分布
适合创建彩虹效果或品牌渐变

3.3 自定义颜色位置

使用 locations 属性控制每个颜色的位置：

const CustomLocationGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#f093fb', '#f5576c', '#4facfe']}
      locations={[0, 0.5, 1]}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>自定义位置</Text>
    </LinearGradient>
  );
});

locations 的工作原理：

locations 数组长度必须与 colors 数组相同
每个值的范围是 0-1
0 表示渐变起点，1 表示渐变终点
颜色会在指定的位置精确出现

使用场景：

需要强调某个颜色区域
创建不对称的渐变效果
实现特定的视觉设计

四、渐变方向控制

4.1 水平渐变（从左到右）

通过设置 start 和 end 控制渐变方向：

const HorizontalGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#a8edea', '#fed6e3']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>水平渐变</Text>
    </LinearGradient>
  );
});

坐标系统说明：

start 和 end 使用相对坐标（0-1）
{ x: 0, y: 0 }：左上角
{ x: 1, y: 0 }：右上角
{ x: 0, y: 1 }：左下角
{ x: 1, y: 1 }：右下角

为什么使用相对坐标？

适应不同尺寸的容器
不需要计算具体的像素值
响应式设计更灵活

4.2 对角线渐变（从左上到右下）

const DiagonalGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#89f7fe', '#66a6ff']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>对角线渐变</Text>
    </LinearGradient>
  );
});

对角线渐变的特点：

从左上角到右下角
创建动态的视觉效果
适合作为卡片或按钮背景

4.3 角度渐变

使用 angle 属性通过角度控制渐变方向：

const AngleGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#ff9a9e', '#fecfef', '#fecfef']}
      useAngle={true}
      angle={45}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>45度角渐变</Text>
    </LinearGradient>
  );
});

角度渐变参数：

useAngle: true：启用角度模式（必需）
angle：渐变角度（0-360度）

注意： angleCenter 属性在鸿蒙平台上暂不支持。

角度说明：

0度：从下到上
90度：从左到右
180度：从上到下
270度：从右到左
45度：从左下到右上

五、渐变背景应用场景

5.1 页面背景渐变

将渐变作为整个页面的背景：

const PageBackgroundGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#667eea', '#764ba2']}
      style={styles.pageContainer}
    >
      <View style={styles.content}>
        <Text style={styles.title}>页面标题</Text>
        <Text style={styles.subtitle}>副标题内容</Text>
      </View>
    </LinearGradient>
  );
});

样式实现：

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: '700',
    color: '#FFFFFF',
    marginBottom: 12,
  },
  subtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.9)',
  },
});

5.2 卡片背景渐变

为卡片添加渐变背景，增强视觉效果：

const CardGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#f5f7fa', '#c3cfe2']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.card}
    >
      <Text style={styles.cardTitle}>卡片标题</Text>
      <Text style={styles.cardText}>卡片内容描述</Text>
    </LinearGradient>
  );
});

卡片样式：

const styles = StyleSheet.create({
  card: {
    borderRadius: 16,
    padding: 20,
    margin: 16,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 12,
    elevation: 8,
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#303133',
    marginBottom: 8,
  },
  cardText: {
    fontSize: 14,
    color: '#606266',
  },
});

5.3 按钮背景渐变

为按钮添加渐变背景，增强交互感：

import { TouchableOpacity } from 'react-native';

const ButtonGradient = memo(({ title, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <LinearGradient
        colors={['#4facfe', '#00f2fe']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        style={styles.button}
      >
        <Text style={styles.buttonText}>{title}</Text>
      </LinearGradient>
    </TouchableOpacity>
  );
});

按钮样式：

const styles = StyleSheet.create({
  button: {
    borderRadius: 25,
    paddingVertical: 12,
    paddingHorizontal: 32,
    margin: 16,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

六、性能优化与最佳实践

6.1 使用 memo 优化组件

渐变组件通常会被频繁使用，使用 memo 可以避免不必要的重新渲染：

const GradientCard = memo<GradientCardProps>(({ title, subtitle }) => {
  return (
    <LinearGradient
      colors={['#667eea', '#764ba2']}
      style={styles.card}
    >
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </LinearGradient>
  );
});

GradientCard.displayName = 'GradientCard';

memo 的工作原理：

对比 props 是否变化
只有 props 变化时才重新渲染
对于简单的渐变组件特别有效

6.2 避免过度使用渐变

虽然渐变效果很美观，但过度使用会影响性能：

// 不推荐：所有元素都使用渐变
<LinearGradient colors={['#a', '#b']}>
  <LinearGradient colors={['#c', '#d']}>
    <LinearGradient colors={['#e', '#f']}>
      <Text>内容</Text>
    </LinearGradient>
  </LinearGradient>
</LinearGradient>

// 推荐：只在关键区域使用渐变
<LinearGradient colors={['#a', '#b']} style={styles.header}>
  <Text>标题</Text>
</LinearGradient>
<View style={styles.content}>
  <Text>内容</Text>
</View>

优化建议：

只在关键区域使用渐变（头部、按钮、卡片）
避免嵌套过多的渐变组件
在列表中使用时考虑性能影响

6.3 使用 StyleSheet 创建样式

使用 StyleSheet.create 创建样式对象，提高性能：

const styles = StyleSheet.create({
  gradientBox: {
    borderRadius: 12,
    padding: 20,
    minHeight: 150,
  },
  gradientText: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '600',
  },
});

七、常见问题与解决方案

7.1 渐变不显示

问题现象： 渐变组件渲染了但看不见

可能原因：

colors 数组为空或格式错误
组件尺寸为 0
被其他元素遮挡

解决方案：

// 1. 确保至少有两个颜色
<LinearGradient colors={['#4facfe', '#00f2fe']} />  // ✅
<LinearGradient colors={['#4facfe']} />  // ❌

// 2. 确保有尺寸
<LinearGradient
  colors={['#4facfe', '#00f2fe']}
  style={{ minHeight: 100 }}
/>

// 3. 检查 z-index
<LinearGradient
  colors={['#4facfe', '#00f2fe']}
  style={{ zIndex: 1 }}
/>

7.2 渐变方向不对

问题现象： 渐变方向与预期不符

可能原因：

start 和 end 坐标设置错误
angle 角度理解有误
坐标系统理解错误

解决方案：

// 垂直渐变（从上到下）
<LinearGradient
  colors={['#a', '#b']}
  start={{ x: 0, y: 0 }}
  end={{ x: 0, y: 1 }}
/>

// 水平渐变（从左到右）
<LinearGradient
  colors={['#a', '#b']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
/>

// 对角线渐变（从左上到右下）
<LinearGradient
  colors={['#a', '#b']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
/>

7.3 颜色位置不生效

问题现象： locations 属性设置的没有效果

可能原因：

locations 数组长度与 colors 不匹配
locations 值超出 0-1 范围
数组顺序不正确

解决方案：

// 确保长度匹配
<LinearGradient
  colors={['#a', '#b', '#c']}
  locations={[0, 0.5, 1]}  // ✅ 长度相同
/>

// 确保值在范围内
<LinearGradient
  colors={['#a', '#b', '#c']}
  locations={[0, 0.5, 1]}  // ✅ 0-1 范围
/>

// 确保顺序递增
<LinearGradient
  colors={['#a', '#b', '#c']}
  locations={[0, 0.5, 1]}  // ✅ 递增
  locations={[0.5, 0, 1]}  // ❌ 非递增
/>

7.4 angleCenter 不支持

问题现象： 在鸿蒙平台上使用 angleCenter 没有效果

解决方案：
根据官方文档，angleCenter 属性在鸿蒙平台上暂不支持。如果需要控制角度中心，可以使用 start 和 end 属性来模拟：

// 不支持 angleCenter
<LinearGradient
  colors={['#a', '#b']}
  useAngle={true}
  angle={45}
  angleCenter={{ x: 0.3, y: 0.7 }}  // ❌ 鸿蒙不支持
/>

// 使用 start/end 替代
<LinearGradient
  colors={['#a', '#b']}
  start={{ x: 0.3, y: 0.7 }}
  end={{ x: 0.7, y: 0.3 }}  // ✅ 可用
/>

八、完整实战代码

import React, { memo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import LinearGradient from "react-native-linear-gradient";

// 基础渐变组件
const BasicGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#4facfe', '#00f2fe']}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>基础渐变</Text>
    </LinearGradient>
  );
});

BasicGradient.displayName = 'BasicGradient';

// 三色渐变组件
const ThreeColorGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#fa709a', '#fee140', '#fa709a']}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>三色渐变</Text>
    </LinearGradient>
  );
});

ThreeColorGradient.displayName = 'ThreeColorGradient';

// 水平渐变组件
const HorizontalGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#a8edea', '#fed6e3']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>水平渐变</Text>
    </LinearGradient>
  );
});

HorizontalGradient.displayName = 'HorizontalGradient';

// 对角线渐变组件
const DiagonalGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#89f7fe', '#66a6ff']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>对角线渐变</Text>
    </LinearGradient>
  );
});

DiagonalGradient.displayName = 'DiagonalGradient';

// 角度渐变组件
const AngleGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#ff9a9e', '#fecfef', '#fecfef']}
      useAngle={true}
      angle={45}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>45度角渐变</Text>
    </LinearGradient>
  );
});

AngleGradient.displayName = 'AngleGradient';

// 自定义位置渐变组件
const CustomLocationGradient = memo(() => {
  return (
    <LinearGradient
      colors={['#f093fb', '#f5576c', '#4facfe']}
      locations={[0, 0.5, 1]}
      style={styles.gradientBox}
    >
      <Text style={styles.text}>自定义位置</Text>
    </LinearGradient>
  );
});

CustomLocationGradient.displayName = 'CustomLocationGradient';

// 渐变按钮组件
interface GradientButtonProps {
  title: string;
  onPress: () => void;
}

const GradientButton = memo<GradientButtonProps>(({ title, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <LinearGradient
        colors={['#4facfe', '#00f2fe']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        style={styles.button}
      >
        <Text style={styles.buttonText}>{title}</Text>
      </LinearGradient>
    </TouchableOpacity>
  );
});

GradientButton.displayName = 'GradientButton';

const App = () => {
  const handlePress = () => {
    console.log('按钮被点击');
  };

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {/* 标题区域 */}
        <View style={styles.header}>
          <Text style={styles.pageTitle}>React Native for Harmony</Text>
          <Text style={styles.subtitle}>LinearGradient 基础渐变</Text>
        </View>

        {/* 基础渐变 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>基础渐变</Text>
          <BasicGradient />
        </View>

        {/* 三色渐变 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>三色渐变</Text>
          <ThreeColorGradient />
        </View>

        {/* 水平渐变 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>水平渐变</Text>
          <HorizontalGradient />
        </View>

        {/* 对角线渐变 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>对角线渐变</Text>
          <DiagonalGradient />
        </View>

        {/* 角度渐变 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>角度渐变</Text>
          <AngleGradient />
        </View>

        {/* 自定义位置 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>自定义位置</Text>
          <CustomLocationGradient />
        </View>

        {/* 渐变按钮 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>渐变按钮</Text>
          <GradientButton title="点击我" onPress={handlePress} />
        </View>

        {/* 说明区域 */}
        <View style={styles.infoCard}>
          <Text style={styles.infoTitle}>💡 功能说明</Text>
          <Text style={styles.infoText}>• 基础渐变：最简单的两色渐变</Text>
          <Text style={styles.infoText}>• 三色渐变：使用三个颜色创建更丰富的效果</Text>
          <Text style={styles.infoText}>• 水平渐变：从左到右的渐变</Text>
          <Text style={styles.infoText}>• 对角线渐变：从左上到右下的渐变</Text>
          <Text style={styles.infoText}>• 角度渐变：通过角度控制渐变方向</Text>
          <Text style={styles.infoText}>• 自定义位置：精确控制颜色位置</Text>
          <Text style={styles.infoText}>• 鸿蒙端完美兼容，渲染正常</Text>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F7FA',
  },
  scrollView: {
    flex: 1,
  },

  // ======== 标题区域 ========
  header: {
    padding: 20,
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: '#EBEEF5',
  },
  pageTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#303133',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#909399',
    textAlign: 'center',
  },

  // ======== 区域 ========
  section: {
    marginTop: 12,
    backgroundColor: '#FFFFFF',
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#303133',
    marginBottom: 16,
  },

  // ======== 渐变框 ========
  gradientBox: {
    padding: 20,
    borderRadius: 12,
    minHeight: 120,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '600',
  },

  // ======== 按钮 ========
  button: {
    borderRadius: 25,
    paddingVertical: 12,
    paddingHorizontal: 32,
    margin: 16,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },

  // ======== 信息卡片 ========
  infoCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    margin: 16,
    marginTop: 0,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 4,
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#303133',
    marginBottom: 12,
  },
  infoText: {
    fontSize: 14,
    color: '#606266',
    lineHeight: 22,
    marginBottom: 6,
  },
});

export default App;

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

使用专业的 Flutter 天气图标库weather_icons统一风格的图标，提升鸿蒙版天气预报应用专业度

人工智能6S服务平台

鸿蒙中级课程笔记13—应用/元服务上架

AppGallery Connect是华为推出的应用一站式服务平台，致力于为开发者提供应用/元服务开发、分发、分析、运营全生命周期服务，构建全场景智慧化的应用生态。HarmonyOS应用/元服务开发完成后，需要经过AppGallery Connect上架发布，才能分发到应用市场/负一屏等各渠道。本课程将通过构建一个HarmonyOS应用，来介绍HarmonyOS应用/元服务的创建、编译和上架操作。