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

2022 年 2 月 02 日
本文字数：1590 字
阅读完需：约 5 分钟

一、安装

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

复制代码

二、属性介绍

2.1 colors

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

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

复制代码

效果如下：

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% 结束

复制代码

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

复制代码

示例 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]}

复制代码

效果如下：

三、应用

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},

复制代码

效果如下：

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/cae41935795fa12a78d2febcd】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

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

一、安装

二、属性介绍

2.1 colors

2.2 start / end

2.3 locations

三、应用

3.1 基础应用

3.2 自定义按钮组件

四、拓展阅读

No Silver Bullet

评论