React native 将自定义浮动文本字段的图标向右对齐

我已经创建了一个自定义浮动文本字段，但是我想将图标向右对齐，并将基线与文本垂直对齐。当前，当导入到my

主组件时，默认情况下图标左侧对齐，如下所示：


我不知道如何做一个变通办法，以样式浮动文本字段与图标。这是我的浮动文本字段组件的代码

component.floatingTextField.js
 import React from "react";
import {
StyleSheet,
Text,
View,
TextInput,
Animated,
Platform
} from "react-native";
import { Input, Label, Item } from "native-base";
import Icon from "react-native-vector-icons/dist/FontAwesome";

import AbstractComponent from "../_abstract/abstract.component";

export default class FloatingTextField extends AbstractComponent {
constructor(props) {
    super(props);

    this.state = {
        labelFontSize: 14,
        labelMarginTop: 0,

        value: ""
    };
}

onFocus() {
    this.setState({ labelFontSize: 12, labelMarginTop: 14 });
}
onBlur() {
    if (!this.hasValue()) {
        this.setState({ labelFontSize: 14, labelMarginTop: 0 });
    }
}
onChange(event) {
    this.setState({ value: event.nativeEvent.text });
}

hasValue() {
    return this.state.value !== "";
}

hasIcon() {
    return this.props.hasOwnProperty("icon");
}

render() {
    if (this.hasIcon()) {
        return (
            <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                    style={{
                        flex: 0.1,
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    {this.props.icon}
                </View>

                <View style={{ flex: 0.9 }}>
                    <Item floatingLabel style={{ margin: 0 }}>
                        <Label
                            style={{
                                fontSize: this.state.labelFontSize,
                                margin: 0,
                                marginTop: this.state.labelMarginTop
                            }}
                        >
                            {this.props.label}
                        </Label>
                        <Input
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onChange={event => this.onChange(event)}
                            style={{ paddingLeft: 0 }}
                        />
                    </Item>
                </View>
            </View>
        );
    } else {
        return (
            <View style={{ flex: 1, flexDirection: "row" }}>
                <View style={{ flex: 1 }}>
                    <Item floatingLabel style={{ margin: 0, padding: 0 }}>
                        <Label
                            style={{
                                fontSize: this.state.labelFontSize,
                                margin: 0,
                                marginTop: this.state.labelMarginTop
                            }}
                        >
                            {this.props.label}
                        </Label>
                        <Input
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onChange={event => this.onChange(event)}
                            style={{ paddingLeft: 0 }}
                        />
                    </Item>
                </View>
            </View>
        );
    }
}
}

component.floatingTextField.js
从“React”导入React；
进口{
样式表，
文本，
看法
文本输入，
有生气的
站台
}从“反应本族语”；
从“本机基”导入{Input，Label，Item}；
从“react native vector icons/dist/font”导入图标；
从“./\u abstract/abstract.component”导入AbstractComponent；
导出默认类FloatingTextField扩展AbstractComponent{
建造师（道具）{
超级（道具）；
此.state={
labelFontSize:14，
labelMarginTop:0，
值：“”
};
}
onFocus（）{
this.setState（{labelFontSize:12，labelMarginTop:14}）；
}
onBlur（）{
如果（！this.hasValue（））{
this.setState（{labelFontSize:14，labelMarginTop:0}）；
}
}
onChange（事件）{
this.setState（{value:event.nativeEvent.text}）；
}
hasValue（）{
返回this.state.value！==“”；
}
哈西肯{
返回此.props.hasOwnProperty（“图标”）；
}
render（）{
if（this.hasIcon（））{
返回(
{this.props.icon}
{this.props.label}
this.onFocus（）}
onBlur={（）=>this.onBlur（）}
onChange={event=>this.onChange（event）}
样式={{paddingLeft:0}
/>
);
}否则{
返回(
{this.props.label}
this.onFocus（）}
onBlur={（）=>this.onBlur（）}
onChange={event=>this.onChange（event）}
样式={{paddingLeft:0}
/>
);
}
}
}

main.component.js

<FloatingTextField label="Payment Date *" value="22/09/17" style={{ position: "relative" }} icon={<Icon name="calendar" size={16} />} />



感谢您的帮助和指导。谢谢。
对于外部视图，请使用
flexDirection:“行反转”
。它使图标（第一个子图标）从左侧开始，并使
justifyContent='start'

或者您可以保留
flexDirection='row'
，但将输入作为第一个子项添加。
对于外部视图，请使用
flexDirection:'row reverse'
。它使图标（第一个子图标）从左侧开始，并使
justifyContent='start'

或者您可以保留
flexDirection='row'
，但将输入作为第一个子项添加。
谢谢！！简直太棒了@FatemehThanks！！简直太棒了@Fatemeh