react圆角 颜色渐变

<TouchableOpacity style={styles.loginButtonViewStyle}>
        <Text style={styles.loginTextStyle}>登录</Text>
</TouchableOpacity>

<View style={styles.loginButtonViewStyle2}>
    <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
        <Text style={styles.buttonText}>
            竖向渐变
        </Text>
    </LinearGradient>
</View>
<View style={styles.loginButtonViewStyle2}>
    <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#E8E8D9', '#B3D9D9', '#AE57A4']} style={styles.linearGradient}>
        <Text style={styles.buttonText}>
            横向渐变
        </Text>
    </LinearGradient>
</View>

 

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    rowStyle:{
        width:width*0.8,
        flexDirection:'row',
        justifyContent:'center',
        height:44,
        borderBottomWidth: 0.5,
        // borderBottomColor:this.state.wzTextInput?'green': 'gray',  //报wzTextInput没定义
        marginLeft:10,
        marginRight:10,
    },
    leftViewStyle:{
        flex:1,
        flexDirection:'row',
        justifyContent:'center',
        alignItems: 'center'
    },
    imageStyle:{
        width:20,
        height: 20,
        tintColor:'green',
        marginLeft: 5
    },
    inputStyle:{
        flex:1,
        height:44,
    },
    rightTextStyle:{
        width:50,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    loginTextStyle:{
        fontSize:24,
        color:'white'
    },
    loginButtonViewStyle:{
        width:width*0.8,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        height:44,
        marginTop:40,
        marginLeft:10,
        marginRight:10,
        backgroundColor:'green',
        borderRadius:20
    },
    loginButtonViewStyle2:{
        width:width*0.8,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        height:44,
        marginTop:40,
        marginLeft:10,
        marginRight:10,
        borderRadius: 5,
    },
    linearGradient: {
        flex: 1,
        paddingLeft: 15,
        paddingRight: 15,
        borderRadius: 5
    },
    buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
    },
});