RN渐变按钮

react-native渐变效果,渐变背景组件封装

组件文件

import React,{Component} from 'react';
import { Text,StyleSheet } from "react-native";
import { TouchableOpacity } from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';

class GradientBtn extends Component {
    //设置默认值
    static defaultProps={
        sizeStyle:{width:'100%',height:45,borderRadius:22.5,alignSelf:'center'},
        textStyle:{fontSize:18,color:'white'},
        colorStyle:['#9b63cd','#e0708c'],
    }
    render() { 
        return (
            <TouchableOpacity style={{width:'100%',height:'100%',overflow:'hidden',...this.props.sizeStyle}}>
                <LinearGradient start={{x:0,y:0}} end={{x:1,y:0}} colors={this.props.colorStyle} style={styles.linearStyle}>
                    <Text style={this.props.textStyle}>{this.props.children}</Text>
                </LinearGradient>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    linearStyle:{width:'100%',height:'100%',justifyContent:'center',alignItems:'center'},
});

export default GradientBtn;

使用(自己修改一下导入路径)

import GradientBtn from "../component/gradient_btn";

<GradientBtn sizeStyle={{width:'100%',height:45,borderRadius:22.5,alignSelf:'center'}} textStyle={{fontSize:18,color:'white'}} colorStyle={['#9b63cd','#e0708c']}>获取验证码</GradientBtn>