LinearGradient

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

Overview

The main purpose of LinearGradient is to provide linear gradient effects for child nodes.

Code demo

Note: for more information, see LinearGradient Demo.

2-color vertical gradient

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

3-color angular gradient

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

Panel background gradient

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

Container style.

Type Required
ViewPropTypes.style No

children

The child node will be added with a gradient effect, which is generally Rect.

Type Required Default value
any No null

x1

The x-axis coordinate of the starting point.

Type Required Default value
string No 0%

y1

The y-axis coordinate of the starting point.

Type Required Default value
string No 0%

x2

The x-axis coordinate of the ending point.

Type Required Default value
string No 0%

y2

The y-axis coordinate of the ending point.

Type Required Default value
string No 100%

stops

Gradient stop point.

Type Required Default value
object No { ‘0%’: ‘rgb(255, 255, 255)’, ‘100%’: ‘rgb(0, 0, 0)’ }

Note: the above default value is a linear gradient from white to black from the upper left corner to the lower left corner.

Reference

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