LinearGradient

LinearGradient 渐变

简介

1.0 开始加入

主要是给子节点提供一个线性渐变的效果

何时使用

一般用于背景的渐变展示或者Slider组件中的自定义渐变颜色轨道

代码演示

垂直两段渐变

import React from 'react';
import { View } from 'react-native';
import { Rect } from 'react-native-svg';
import { LinearGradient } from 'tuya-panel-kit';

const dimension = { width: 200, height: 300 };

export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={dimension}>
<LinearGradient
style={dimension}
x1="0%"
y1="0%"
x2="0%"
y2="100%"
stops={{
'0%': 'red',
'100%': 'yellow',
}}
><Rect {...dimension} />
</LinearGradient>
</View>
</View>
);

斜向三段渐变

import React from 'react';
import { View } from 'react-native';
import { Rect } from 'react-native-svg';
import { LinearGradient } from 'tuya-panel-kit';

const dimension = { width: 200, height: 300 };

export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={dimension}>
<LinearGradient
style={dimension}
x1="100%"
y1="0%"
x2="0%"
y2="100%"
stops={{
'0%': 'red',
'30%': 'blue',
'100%': 'yellow',
}}
><Rect {...dimension} />
</LinearGradient>
</View>
</View>
);

面板背景渐变

import _ from 'lodash';
import React from 'react';
import { View } from 'react-native';
import { NavigatorLayout } from 'tuya-panel-kit';
import composeLayout from './composeLayout';
import configureStore from './redux/configureStore';
import { routers } from './config';

export const store = configureStore();

class MainLayout extends NavigatorLayout {
hookRoute(route) {
return {
...route,
background: {
'3%': 'red',
'90%': 'yellow',
},
};
}

renderScene(route, navigator) {
let Scene = <View />;
let schema = {};
let uiConfig = {};
const { dispatch, devInfo, dpState } = this.props;

if (!_.isEmpty(devInfo)) {
schema = devInfo.schema || {};
uiConfig = devInfo.uiConfig || {};
}

const router = routers.find(r => r.id === route.id);

if (router && router.Scene) {
const Component = router.Scene;
Scene = (
<Component
dpData={{ state: dpState, schema, uiConfig }}
dispatch={dispatch}
navigator={navigator}
{...route}
/>
);
}

return Scene;
}
}

export default composeLayout(store, MainLayout);

API

style

容器样式

类型(Type) 必传(Required)
ViewProptypes.style

children

该子节点会被添加渐变效果,一般为Rect

类型(Type) 必传(Required) 默认值
any null

x1

起始点的x轴坐标

类型(Type) 必传(Required) 默认值
string ‘0%’

y1

起始点的y轴坐标

类型(Type) 必传(Required) 默认值
string ‘0%’

x2

终点的x轴坐标

类型(Type) 必传(Required) 默认值
string ‘0%’

y2

终点的y轴坐标

类型(Type) 必传(Required) 默认值
string ‘100%’

stops

渐变梯度停点

类型(Type) 必传(Required) 默认值
object { ‘0%’: ‘rgb(255, 255, 255)’, ‘100%’: ‘rgb(0, 0, 0)’ }

以上默认值为从左上角至左下角进行由白色至黑色的线性渐变

更多资料

react-native-svg/LinearGradient

400-881-8611