Как я могу установить значок в текстовом вводе?

Question

Я пытаюсь установить значок внутри текстового ввода.Я знаю, есть ответ .

Но он не работает должным образом, так как значок находится за пределами TextInput, мне нужно, чтобы он был внутри.

Это то, что я получаю до сих пор:

Это мой код:

         <View style={styles.InputContainer}>
            <Ionicons
              style={styles.IconWithinInput}
              name="ios-search"
              size={24}
            />
            <TextInput
              style={styles.AddEditInputs}
              onChangeText={text => this.setState({ text })}
              value={this.state.text}
            />
          </View>

И стили:

  AddEditInputs: {
    flex: 1,
    height: 40,
    borderWidth: 1,
  },

  IconWithinInput: {
    padding: 10,
  },

  InputContainer: {
    flexDirection: 'row',
  },

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

Последний дизайн будет таким:

Икак вы можете видеть, граница ввода также находится внизу значка.

Что еще мне нужно для достижения того, что мне нужно?

Answer 1

Вы не можете напрямую поставить icon на textInput.То, что вы можете сделать, это обернуть icon и textInput представлением с flexDirection, установленным на row, и предоставить left padding для icon, чтобы оно выглядело как в textInput.Если вы хотите сделать это, вы можете использовать что-то вроде этого

 <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
     }}>
    <View style={{ flexDirection: 'row' }}>
      <View style={{justifyContent: "center", marginRight: 5 }}>
        <Image
          source={{
             uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png',
              }}
              style={{ width: 10, height: 10 }}
            />
          </View>

          <TextInput placeholder="Enter your name" />
        </View>
      </View>

Но я предлагаю использовать Input component из react-native-elements, так как leftIcon в качестве props.Вы можете найти больше информации на здесь

Answer 2

<View style={{flex: 1, flexDirection: 'row'}}>
    <Image
        source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        style={{borderWidth: 1,width: 40, height: 40}}
        />
    <TextInput
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        style={{borderWidth: 1, height: 40, borderColor: 'grey'}}
        />
         <View>

1. Оберните компонент с помощью flex и укажите ширину для значка.Вы можете установить иконку с помощью обертки, поскольку она не может быть включена в текстовое поле.