expo-linear-gradient

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

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

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

安装

在package.json文件中添加JavaScript库依赖项。

已复制到剪贴板。

 dependencies: {
     ...
     "@amazon-devices/expo-linear-gradient": "~2.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属性的长度相同。每个数字表示相应的颜色应该驻留的颜色停止位置。如果未指定，则颜色将在渐变上均匀分布。

支持的版本

程序包版本	基于	@amazon-devices/react-native-kepler版本
2.0.x	12.6.0	2.0.x

其他资源

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

Last updated: 2025年9月30日