カスタム浮動テキストフィールドの右側にアイコンを整列

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'のままにしておき、入力を最初の子として追加することができます。