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 : '#0095d9'
        };
    }


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

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

    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({
    container: {
        flexDirection: 'row',
        borderWidth: 1,
        alignItems: 'center',
        borderRadius: 9,
        backgroundColor: '#fff',
        marginBottom: 5,
        marginTop: 5,
    },
    input: {
        height: 43,
        marginLeft: 10,
        flex: 1
    }
});