Как добавить символ исправления в TextInput, который остается статичным, когда пользователь вводит что-то (React Native)

Question

Итак, у меня есть текстовое поле для ввода имени пользователя.И я хочу символ @ в начале этого TextInput.Кроме того, этот символ @ нельзя удалить.

Как сделать символ @ статичным здесь?defaultValue не поможет мне в моем случае.

Answer 1

Будет оптимально использовать 2 разных компонента: первый элемент со статическим символом "@", а второй - ввод текста: <Text>@</Text> и <TextInput/>

Answer 2

Вам потребуется расширить компонент Input, чтобы иметь эту функцию.Что-то вроде

const extendedInput = (props) => (
  <div>
    <span>@</span>
    <input {...props} />
  </div>
)

Answer 3

Вы можете поместить свой TextInput в компонент View и поместить изображение в самом начале.Однажды я создал нечто похожее на это

    <View
        style={{
            flex: 1,
            borderWidth: 1,
            borderRadius: 11,
            borderColor: "#e1e1e1",
        }}>
        <TextInput
            placeholder="Place Enter Your Username"
            placeholderTextColor={'#FFFFFF'}
            style={{color: '#FFFFFF'}}
            underlineColorAndroid={"transparent"}
            onChangeText={(text) => {
                this.filter = text
            }}/>
        <Image
            resizeMode={'cover'}
            style={{
                width: 22,
                height: 24,
                marginRight: 25,
                position: 'absolute',
                left: 10,
                top: 10
            }}
            source={require('./Images/ic_search_color.png')}/>
    </View>

Answer 4

Поскольку вы не можете прикрепить содержимое к псевдоклассам ввода ::before и ::after, вам следует заключить <input> в <label> и поместить символ '@' на label::before

<label id="my-input">
  <input />
</label>

<style>
#my-input::before {
  position: absolute;
  content: "@";
}
</style>

https://jsfiddle.net/xLg0d3jv/

Answer 5

Почему бы вам просто не использовать базовые CSS для этого.Я получил этот пример из скрипки, может быть, это то, что вы хотите.

HTML

<div class="input-icon">
  <input type="text" placeholder="0.00">
  <i>$</i>
</div>

CSS

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}