Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

converting css linear gradient to react-native-linear-gradient

I have a CSS gradient in Figma

background: linear-gradient(180deg, #0097F3 26.66%, rgba(255, 255, 255, 0.1) 100%);

How can I convert that to react-native-linear-gradient package

I am doing the below code, I dont know how to do 180deg and 26 % etc

<LinearGradient 
  start={{x: 0.26, y: 0.26}} 
        end={{x: 0, y: 1.0}}
        location={[0.25, 0.4]}
        colors={['#0097F3', 'rgba(255, 255, 255, 0.1)']}
 style={{flex: 1}}
 >
........
</LinearGradient>

A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom".

background-image: linear-gradient(angle, color-stop1, color-stop2);

  1. start: An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: { x: 0.1, y: 0.1 } means that the gradient will start 10% from the top and 10% from the left.
  2. end: Same as the start, but for the end of the gradient.
  3. locations: An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] means that first color will take 0% – 10%, second color will take 10% – 75% and finally third color will occupy 75% – 100%.
question from:https://stackoverflow.com/questions/65660320/converting-css-linear-gradient-to-react-native-linear-gradient

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...