react-linear-gradient

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

@amazon-devices/react-linear-gradient在Vega上提供对于react-native-linear-gradient的支持，后者可为React Native应用提供<LinearGradient>组件。

这是一个系统部署的库，可供适用于Vega的React Native应用使用，无需单独的安装过程。它作为自动链接库进行部署，您的应用在运行时会链接到该库。只能在库和为其构建的适用于Vega的React Native版本之间保证兼容性。

当您升级用于构建应用的适用于Vega的React Native版本时，最佳实践是同时升级它所依赖的库的版本。

有关此库及其API的更多信息，请参阅GitHub存储库中的README.md（仅提供英文版）。

安装

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

已复制到剪贴板。

"dependencies": {
   ...
   "@amazon-devices/react-linear-gradient": "~2.0.0"
}

使用npm install命令重新安装package-lock.json文件。

示例

以下示例显示如何使用<LinearGradient>组件设置文本样式：

已复制到剪贴板。

import * as React from 'react';
import { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
import LinearGradient from '@amazon-devices/react-linear-gradient'

const styles = StyleSheet.create({
    linearGradient: {
        justifyContent:"center",
        width:500,
        height:100,
        borderRadius:5
    },
    buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
    }
});

export class LinearGradientScreen extends Component {
    render() {
        return (
            <View style={{flex:1, backgroundColor: "transparent", justifyContent:"center", alignItems: "center"}}>
                <LinearGradient
                    colors={['#4c669f', '#3b5998', '#192f6a']}
                    style={styles.linearGradient}
                >
                    <Text style={styles.buttonText}>
                        此处显示文本
                    </Text>
                </LinearGradient>
            </View>
        );
    }
}

export default LinearGradientScreen;

API支持

组件API

属性	描述	默认值
`colors`	必选 - 由至少两个表示渐变颜色的颜色值组成的数组。示例：['red', 'blue'] 设置从红色到蓝色的渐变。	（无）
`start`	以下类型的可选对象：`{ x: number, y: number }`坐标从左上角开始声明渐变的起点，占渐变总大小的一小部分。示例：`{ x: 0.1, y: 0.1 }`表示渐变将从顶部开始10%，从左侧开始10%。	（无）
`end`	作用与start相同，但用于渐变的结束。	（无）
`locations`	一个可选的数字数组，用于定义每个渐变颜色的终点，映射到colors属性中具有相同索引的颜色。示例：[0.1, 0.75, 1] 表示第一种颜色将占用0% - 10%，第二种颜色将占用10% - 75%，最后第三种颜色将占用75% - 100%。	（无）
`useAngle`	用于开启/关闭基于角度的计算（与start/end不同）。	（无）
`angle`	所需的角度（以度为单位）。	（无）
`angleCenter`	角度的中心点（将如同在photoshop中一样控制渐变的权重和拉伸）。	（无）

支持的版本

程序包名称	亚马逊NPM库版本	Vega OS内部版本号	Vega SDK版本	发行说明
`@amazon-devices/react-linear-gradient`	2.0.1+2.6.2	`OS 1.1 (201010438050)`	0.20

其他资源

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

Last updated: 2025年9月30日