ReactNative进阶（四十五）：渐变组件 react-native-linear-gradient

阳光穿透心脏的1/2处 2023-01-23 02:57 50阅读 0赞

### 文章目录 ###

*   *  一、安装
     *  二、属性介绍
     *   *  2.1 colors
         *  2.2 start / end
         *  2.3 locations
     *  三、应用
     *   *  3.1 基础应用
         *  3.2 自定义按钮组件
     *  四、拓展阅读

--------------------

## 一、安装 ##

npm i react-native-linear-gradient
    
    react-native link react-native-linear-gradient

## 二、属性介绍 ##

### 2.1 colors ###

默认情况下，渐变色的方向是从上向下的。

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

### 2.2 start / end ###

若要渐变色从左向右，或者斜角渐变，就需要进行如下设置：

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

其中，

*  `start` 就是渐变开始的位置，x、y 范围是 `0 - 1` ，
 *  `end` 同上，就是渐变结束的位置
 *

**示例1: 斜角渐变**

start: {  x: 0.3, y: 0.4 } 渐变是从 左侧30%， 上部 40% 开始
    end: {  x: 0.7, y: 0.8 } 渐变是从 左侧70%， 上部 80% 结束

**示例2: 从左到右**

以下配置可实现从左到右渐变。

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

### 2.3 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`；

**示例1: 0.4是渐变的起点，0.6是渐变的终点**

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

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]

## 三、应用 ##

### 3.1 基础应用 ###

<LinearGradient 
    	colors={ ['#FFD801', '#FF8040', '#F75D59']} 
    	style={ styles.linearGradient}>
      <Text style={ { color:'#fff'}}>
        Sign in with Facebook
      </Text>
    </LinearGradient>
     
    
    linearGradient: { 
    	justifyContent:'center',
    	alignItems:'center',
    	width:200,
    	height:50,
    	paddingLeft: 15,
    	paddingRight: 15,
    	borderRadius: 5
    },

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 2]

### 3.2 自定义按钮组件 ###

import React from 'react';
    import {  View, StyleSheet, Text, TouchableOpacity, Dimensions } from 'react-native';
    import {  Color, Dimens } from '../../../constant';
    import {  MyButton } from '../../../components';
    import LinearGradient from 'react-native-linear-gradient';
    
    const {  width, height } = Dimensions.get('window');
    
    export default (props) => { 
      return <LinearGradient 
      			colors={ props.colorArray} 
      			style={ [styles.bottomViewTou, props.linearTouStyle]} 
      			start={ {  x: 0, y: 0 }} end={ {  x: 1, y: 1 }}>
        		<TouchableOpacity 
        			onPress={ props.onPress} 
       			 	style={ [styles.bottomViewTou, props.linearTouStyle, {  marginTop: 0 }]} disabled={ props.disabled}>
          			<Text style={ [styles.textStyle, props.linearTextStyle]}>			{ props.text || '线性渐变按钮'}</Text>
        </TouchableOpacity>
      </LinearGradient>;
    };
    
    const styles = StyleSheet.create({ 
      bottomViewTou: { 
    		borderRadius: 4, 
    		height: 36, 
    		width: width - Dimens.margin * 2, 
    		marginHorizontal: Dimens.margin, 
    		justifyContent: 'center', 
    		alignItems: 'center',
      },
      textStyle: {  
    		fontSize: 14, 
    		color: '#ffffff', 
    		textAlign: 'center', 
      },
    });

**组件应用**

<LinearGradientButton
     	colorArray={['#FF0A2F', '#CB001E']}
     	onPress={() =>
       		router.navigate('AssetsPublishEditView',  {data: { isNews: true, }}
        	)} 
       		text={'继续录入新闻信息'} 
       	linearTouStyle={
       { width: (width - Dimens.margin * 3) / 2, height: 38, marginHorizontal: 0 }}
       	/>

## 四、拓展阅读 ##

*  [react-native-linear-gradient][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221004/6c6fd1dfeb0242d98273fc830b10ee96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/1f5b4bfcfd2a49c981ed9c53168b31c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/cf8cb9f684ce4bb6b1cbba4d4b3670c6.png
[react-native-linear-gradient]: https://www.npmjs.com/package/react-native-linear-gradient