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参考

组件

属性	描述	默认值
`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日

react-linear-gradient

安装

示例

API参考

组件

支持的版本

相关主题