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 (
            
                
                    {this.props.children}
                
            
        );
    }
}

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

export default GradientBtn;

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

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

获取验证码