如何将线性梯度从css转换为react native中的线性梯度?

Question

我在csslinear-gradient(315.43deg, #706EB6 -6.67%, #A57FCF 106.6%)中有一个线性梯度，我想在react native中使用组件LinearGradient。start,end和locations道具的等效物是什么?如何从css中的线性梯度传递到本地反应?

Answer 1

在React Native中，你可以像这样使用colors属性

<LinearGradient colors={['transparent', '#000000']}>
</LinearGradient>

同样的，你可以传递起始，结束位置

你可以在这里看到LinearGradient的props

declare module 'react-native-linear-gradient' {
import * as React from 'react';
import * as ReactNative from 'react-native';
export interface LinearGradientProps extends ReactNative.ViewProps {
colors: (string | number)[];
start?: { x: number; y: number };
end?: { x: number; y: number };
locations?: number[];
useAngle?: boolean;
angleCenter?: {x: number, y: number};
angle?: number;
}
export class LinearGradient extends React.Component<LinearGradientProps> {}
export default LinearGradient;
}