react native 的自定义圆角 input

Input.js

import React from 'react';
import {
    TextInput,
    View,
    StyleSheet
} from 'react-native';
import PropTypes from 'prop-types'

export default class LoginInput extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            borderColor: props.borderColor ? props.borderColor : '#ccc',
            focusBorderColor: props.focusBorderColor ? props.focusBorderColor : null
        };
    }


    static propTypes = {
        style: PropTypes.object,
        inputStyle: PropTypes.object,
    };

    render () {
        const { inputStyle } = this.props;
        const { borderColor, focusBorderColor } = this.state;
        return (
            <TextInput style={[ styles.input, inputStyle ]}
                       borderColor={borderColor}
                       focusBorderColor={focusBorderColor}
                       onFocus={this.onFocus}
                       onBlur={this.onBlur}
                       {...this.props}
            />
        )
    }

    onFocus = () => {
        let focusBorderColor = this.props.focusBorderColor ? this.props.focusBorderColor : '#0095d9';
        this.setState({ borderColor: focusBorderColor });
        if (this.props.onFocus) {
            this.props.onFocus();
        }
    };
    onBlur = () => {
        //失去焦点的时候,改变borderColor 颜色
        let borderColor = this.props.borderColor ? this.props.borderColor : '#ccc';
        this.setState({ borderColor: borderColor });
        if (this.props.onBlur) {
            this.props.onBlur();
        }
    }
}
const styles = StyleSheet.create({
    input: {
        marginTop: 5,
        marginBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 20,
        borderWidth: 1,
        height: 43,
        marginLeft: 10,
    }
});