@amazon-devices/expo-linear-gradient提供原生React视图,该视图可以沿线性方向在多种颜色之间过渡。
安装
- 在
package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。
- React Native 0.72
- React Native 0.83
- 使用
npm install命令重新安装依赖项。
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
expo-linear-gradient 开放Beta测试文档 作为预发布开放Beta测试的一项内容,亚马逊提供了…
@amazon-devices/expo-linear-gradient提供原生React视图,该视图可以沿线性方向在多种颜色之间过渡。
package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。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',
}}
/>
);
};
| 组件 | 描述 |
|---|---|
LinearGradient | 呈现一个沿线性方向在多种颜色之间过渡的原生视图。 |
| 属性 | 描述 |
|---|---|
colors | 代表渐变中停止位置的颜色数组。至少需要两种颜色(对于单色背景,使用style.backgroundColor组件上的View属性)。 |
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及更早版本 | OS 1.1 (1401010009820)及更早版本 | 0.72 |
| 3.0.0 | 0.24 | OS 1.2 (2101020054720) | 0.72、0.83 |
此页面对您有帮助吗?
