RadialGradient

Last Updated on : 2024-06-05 03:14:32download

Overview

RadialGradient is similar to LinearGradient. The difference is that RadialGradient is drawn from a point to diverge.

Code demo

Note: for more information, see RadialGradient Demo.

Basic radial gradient

The following shows a radial gradient. The gradient radius is 100, the inner circle coordinates are (100, 100), the outer circle coordinates are (100, 100), and the yellow to blue radial gradient is performed outward.

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> );

Basic radial gradient 2

The following shows a radial gradient. The gradient radius is 100, the inner circle coordinates are (200, 100), the outer circle coordinates are (100, 100), and the red, yellow and pink radial gradient is performed outward.

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> );

Add radial gradient effect to the panel background

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

Container style.

Type Required Default value Operating system
ViewPropTypes.style No null all

rx

The horizontal radius of the innermost circle, which is the gradient length.

Type Required Default value Operating system
string No 50% all

ry

The vertical radius of the innermost circle, which is the gradient height.

Type Required Default value Operating system
string No 50% all

fx

The x-axis coordinate point of the innermost circle, which is the gradient center point.

Type Required Default value Operating system
string No 50% all

fy

The y-axis coordinate point of the innermost circle, which is the gradient center point.

Type Required Default value Operating system
string No 50% all

cx

The x-axis coordinate point of the outermost circle.

Type Required Default value Operating system
string No 50% all

cy

The y-axis coordinate point of the outermost circle.

Type Required Default value Operating system
string No 50% all

stops

Gradient stop point

Type Required Default value Operating system
array No [{offset: ‘0%’,stopColor: ‘#ff0’,stopOpacity: ‘1’},{offset:‘100%’,stopColor:‘#00f’,stopOpacity:‘1’}] all

Note: The above default value is a yellow to blue gradient radiating outward from the center point.

Reference

For more information, see react-native-svg/RadialGradient.