RadialGradient

RadialGradient 径向渐变

简介

1.0 开始加入

径向渐变与线性渐变相似,只是它是从一个点开始发散绘制渐变

何时使用

在面板中一般用于某些背景的放射渐变展示

代码演示

基础放射渐变

以下为渐变半径为100,内侧圆坐标(100,100), 外侧圆坐标(100, 100), 向外进行由黄色-蓝色的径向渐变

import React from 'react';
import { View } from 'react-native';
import { RadialGradient } from 'tuya-panel-kit';

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

export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={dimension}>
<RadialGradient
style={dimension}
stops={[{
offset: '0%',
stopColor: '#ff0',
stopOpacity: '1',
}, {
offset: '100%',
stopColor: '#00f',
stopOpacity: '1',
}]}
rx="50%"
ry="50%"
fx="50%"
fy="50%"
cx="50%"
cy="50%"
/>
</View>
</View>
);

基础放射渐变2

以下为渐变半径为100,内侧圆坐标(200,100), 外侧圆坐标(100, 100), 向外进行由红色-黄色-粉色的径向渐变

import React from 'react';
import { View } from 'react-native';
import { RadialGradient } from 'tuya-panel-kit';

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

export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={dimension}>
<RadialGradient
style={dimension}
stops={[{
offset: '0%',
stopColor: 'red',
stopOpacity: '1',
}, {
offset: '50%',
stopColor: 'yellow',
stopOpacity: '1',
}, {
offset: '100%',
stopColor: 'pink',
stopOpacity: '1',
}]}
rx="50%"
ry="50%"
fx="100%"
fy="50%"
cx="50%"
cy="50%"
/>
</View>
</View>
);

  1. 业务中给面板背景添加径向渐变效果
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: {
stops: [{
offset: '0%',
stopColor: 'yellow',
stopOpacity: '1',
}, {
offset: '100%',
stopColor: 'red',
stopOpacity: '1',
}],
},
};
}

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) 默认值(Default) 平台(OS)
ViewProptypes.style null all

rx

最内侧圆水平方向的半径(渐变长度)

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string ‘50%’ all

ry

最内侧圆垂直方向的半径(渐变高度)

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string ‘50%’ all

fx

最内侧圆的x轴坐标点(渐变中心点)

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string ‘50%’ all

fy

最内侧圆的y轴坐标点(渐变中心点)

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string ‘50%’ all

cx

最外侧圆的x轴坐标点

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string ‘50%’ all

cy

最外侧圆的y轴坐标点

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string ‘50%’ all

stops

渐变梯度停点

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
array [{offset: ‘0%’,stopColor: ‘#ff0’,stopOpacity: ‘1’},{offset:‘100%’,stopColor:’#00f’,stopOpacity:‘1’}] all

以上默认值为由中心点向外发散的渐变(黄色 -> 蓝色)

更多资料

react-native-svg/RadialGradient

电话咨询

在线咨询

400-881-8611