react-native-linear-gradient的使用

react-native-linear-gradient

import LinearGradient from 'react-native-linear-gradient'

<LinearGradient
    start={{ x : 0.0, y : 0.25 }} end={{ x : 0.5, y : 1.0 }}
    locations={[ 0, 0.5, 0.6 ]}
    colors={[ 'red', 'yellow', '#192f6a' ]}
    style={styles.linearGradient}>
    <Text style={styles.buttonText}>
        Sign in with Facebook
    </Text>
</LinearGradient>

LinearGradient的属性：

colors
start/end
locations

colors
An array of at least two color values that represent gradient colors. Example: ['red', 'blue'] sets gradient from red to blue.
至少2个颜色值，用于颜色渐变。

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.
可选的对象，形式如: { x: number, y: number }。坐标宣告了渐变的开始位置。

end
Same as start, but for the end of the gradient.
和start一样，但是渐变的结束位置。

start和end同时存在，渐变的起点和终点的连线，即使渐变的轨迹方向。
start={{ x : 0.0, y : 0.25 }} end={{ x : 0.5, y : 1.0 }}

image.png
如上图所示，颜色渐变的切面适合轨迹线垂直的。

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%.
可选数组，内容是一些列数字，定义了colors中对应的每个渐变颜色的停止位置。

<LinearGradient
    start={{ x : 0.0, y : 0 }} end={{ x : 1, y : 0 }}
    locations={[ 0.1, 0.7, 1 ]}
    colors={[ 'yellow', 'green', '#ff0000' ]}
    style={styles.linearGradient}>
    <Text style={styles.buttonText}>
        Sign in with Facebook
    </Text>
</LinearGradient>

image.png
locations={[ 0.1, 0.7, 1 ]}
按照官方的说明，则全局尺寸的10%区域颜色是yellow，60%区域是green,30%区域是#ff0000。但实际上，60%区域是从yellow渐变为green。30%区域是从green渐变为红色。

或者换一种理解方式：0.1-0.7 是颜色1和颜色2之间渐变的区域，0.7到1是颜色2和颜色3之间渐变的区域。那么还有个0-0.1区域呢？该区域是颜色1。

locations={[ 0, 0.5, 0.8]}，则0-0.5是颜色1和颜色2渐变区域，0.5-0.8是颜色2和颜色3的渐变区域，而0.8-1区域的颜色是颜色3。

个人认为，第二种理解更为准确，并且更加容易理解和记忆。

其中locations对应的百分比，应该是上面提到的渐变轨迹的百分比。