react-native 渐变组件

官网地址： https://github.com/react-native-linear-gradient
1.安装

yarn add react-native-linear-gradient

封装成简单的组件使用

使用

import THButton from '../../component/THBUTTON/index'

<THButton style={{borderRadius: 20}}>获取验证码</THButton>

//THBUTTON\index.js
import React,{Component} from 'react';
import {StyleSheet, Text, TouchableOpacity} from 'react-native'
import LinearGradient from 'react-native-linear-gradient';

export default class THButton extends Component{
    constructor(props){
        super(props)
    }
    // 定义默认参数
    static defaultProps={
        style:{}
    }
    render(){
        return(
            <TouchableOpacity activeOpacity={.8} style={{width: "100%",overflow:'hidden', ...this.props.style}}>
                <LinearGradient start={{x: 0, y: 0}} end={{x:1,y:0}} colors={['#9b63cd', '#e0708c']} style={styles.linearGradient}>
                    <Text style={styles.buttonText}>
                        {this.props.children}
                    </Text>
                </LinearGradient>
            </TouchableOpacity>
        )
    }
}

// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});