react-native-linear-gradient顏色漸變

目錄

• 一 安裝
• 二 使用
  • 2.1 colors
  • 2.2 start / end
    • eg1:斜角漸變
    • eg2: 從左到右
  • 2.2 locations
    • eg1: 0.4是漸變的起點，0.6是漸變的終點

一 安裝

npm i react-native-linear-gradient

react-native link react-native-linear-gradient

二 使用

2.1 colors

默認情況下，漸變色的方向是從上向下的

<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{height: 150}}>
</LinearGradient>

2.2 start / end

你想漸變色從左向右，或者斜角漸變，就需要設置下了

start:{ x: number, y: number }
end:{ x: number, y: number }

start 就是漸變開始的位置，x、y 范圍是 0 - 1 ，
end 同上，就是漸變結束的位置

eg1:斜角漸變

start: { x: 0.3, y: 0.4 } 漸變是從 左側30%， 上部 40% 開始
end: { x: 0.7, y: 0.8 } 漸變是從 左側70%， 上部 80% 結束

<LinearGradient
    start={{x: 0.25, y: 0.25}}
    end={{x: 0.75, y: 0.75}}
    colors={['red', 'green', 'black']}
    style={{height: 150, flex: 1}}>
</LinearGradient>

eg2: 從左到右

從左到右的漸變就可以設置出來了

start={{x: 0, y: 0}} 
end={{x: 1, y: 0}}

2.2 locations

假如想指定每種漸變顏色的范圍，比如紅色占20%， 綠色占70%，黑色占10%，也是可以設置的，就用到了另外一個屬性了 locations

locations 對應的是 colors
locations={[0.2,0.7,1.0]}
colors={['red', 'green', 'black']}

red 范圍就是 0.0 - 0.2
green 范圍就是 0.2 - 0.7
black 范圍就是 0.7 - 1.0

eg1: 0.4是漸變的起點，0.6是漸變的終點

colors={['red', 'green', 'black']}
locations={[0.4,0.5,0.6]}