Question

我创建了一个自定义浮动文本字段但是我想将图标右对齐，并且还要将基线与文本垂直对齐。目前，当导入我的main component时，默认情况下图标在左侧对齐，如下所示：

我不知道如何使用图标设置浮动文本字段的样式。这是我的浮动文本字段组件的代码

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>
        );
    }
}
}

main.component.js

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

感谢一些帮助和指导。感谢。

Answer 1

用于外部视图使用flexDirection: 'row-reverse'。它使图标（这是第一个孩子）从左边开始并制作justifyContent='start'。

或者您可以保留flexDirection='row'，但将输入添加为第一个孩子。

将图标右侧对齐以显示自定义浮动文本字段

1 个答案: