expo-linear-gradient

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

@amazon-devices/expo-linear-gradient提供原生React视图，该视图可以沿线性方向在多种颜色之间过渡。

安装
示例
API参考
- 组件
  - LinearGradient属性
支持的版本
其他资源

安装

在package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。
- React Native 0.72
- React Native 0.83
已复制到剪贴板。
dependencies: { ... "@amazon-devices/expo-linear-gradient": "~2.0.0", }
已复制到剪贴板。
dependencies: { ... "@amazon-devices/expo-linear-gradient": "~3.0.0", }
使用npm install命令重新安装依赖项。

示例

已复制到剪贴板。

import React from 'react';
import {LinearGradient} from '@amazon-devices/expo-linear-gradient';

export const App = () => {
  return (
    <LinearGradient
      colors={['white', 'red']}
      start={[0.5, 0.5]}
      end={[1, 1]}
      style={{
        width: 100,
        maxHeight: 200,
        minHeight: 200,
        borderWidth: 1,
        marginVertical: 20,
        borderColor: 'black',
      }}
    />
  );
};

API参考

请查看以下专门文档页面，了解有关此库、API参考等的信息：针对expo-linear-gradient的官方Expo文档（仅提供英文版）。

组件

组件	描述
`LinearGradient`	呈现一个沿线性方向在多种颜色之间过渡的原生视图。

LinearGradient属性

属性	描述
`colors`	代表渐变中停止位置的颜色数组。至少需要两种颜色（对于单色背景，使用`View`组件上的`style.backgroundColor`属性）。
`start`	For example, { `x: 0.1`, `y: 0.2` }表示渐变将在距左侧10%、距底部20%处开始。
`end`	For example, { `x: 0.1`, `y: 0.2` }表示渐变将在距左侧10%、距底部20%处结束。
`locations`	一个包含`0`到`1`（含）范围内的数字的数组，其长度与colors属性的长度相同。每个数字表示相应的颜色应该驻留的颜色停止位置。如果未指定，则颜色将在渐变上均匀分布。

支持的版本

NPM程序包版本	Vega SDK版本	Vega OS版本	React Native版本
2.0.1758683737	0.23及更早版本	`操作系统1.1 (1401010009820)`及更早版本	0.72
3.0.0	0.24	`操作系统1.2 (2101020054720)`	0.72、0.83

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2026年8月3日