Как поместить значок валюты перед значением TextInput в ReactNative? - PullRequest
Новая
       68

Как поместить значок валюты перед значением TextInput в ReactNative?

0 голосов
/ 11 декабря 2019

Мне нужно поставить значок валюты перед значением, когда пользователь вводит сумму, но это не так просто. Я провел весь день, но все еще не нашел идеального решения. Мой лучший способ заключался в переносе дочернего компонента в TextInput, например: 

          <TextInput
            style={SS.input}
            placeholder={props.placeholder}
            underlineColorAndroid='transparent' editable={!props.disabled}
            keyboardType={keyboardType} autoCapitalize='none'
            autoCorrect={false} selection={state.position}
            value={state.value} onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            autoFocus={autoFocus}>
            {!!this.props.icon && !!state.value && (
              <Text style={{marginLeft: 10}}>{this.props.icon}</Text>
            )}
          </TextInput>

Но у этого решения есть несколько минусов. Первый, это не возможно, чтобы стилировать дочерний компонент, я не могу установить отступ слева от суммы. И второе это фокус TextInput идти после значка. Может кто-нибудь помочь мне, пожалуйста. enter image description here

1 Ответ

0 голосов
/ 12 декабря 2019

Я нашел лучшее решение, вам нужно сделать так, установить стиль TextInput так, чтобы он стал невидимым. И чтобы отобразить ввод, добавьте компонент Text вверху с теми же параметрами, чтобы он отображался точно вверху исходного. Это как маска. 

<View style={container}>
 <TextInput
            style={[SS.input, styles.input]}
            placeholder={props.placeholder}
            value={state.value} onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            // make invisible text
            color={'rgba(0,0,0,0)'} 
            autoFocus={autoFocus} />
          // render currency symbol with value that depends on the props
          {!!props.maskedTextColor !! && props.currencySymbol && !!state.value && (
            <Text
              color={props.maskedTextColor}
              textStyle={'menuSliders'}
              style={styles.maskedText}>
              {`${state.value} ${props.currencySymbol}`}
            </Text>
          )}
<View/>

И вам нужно поместить компонент Text точно так же, как компонент, и установить стиль, в моем случае это было: 

    maskedText: {
      position: 'absolute',
      left: 15,
    },
...