Comment puis-je mettre une icône dans un TextInput dans React Native?

Fondamentalement, vous ne pouvez pas mettre une icône à l'intérieur d'un textInput mais vous pouvez la simuler en l'enveloppant dans une vue et en définissant des règles de style simples.

Voici comment cela fonctionne:

• mettre les deux Icône et TextInput dans a Vue parent
• définissez flexDirection du parent sur ' row ' qui alignera le les enfants les uns à côté des autres
• Donnez TextInput flex 1 afin qu'il prenne toute la largeur du parent Vue
• donner Vue parent un borderBottomWidth, puis appuyez sur cette frontière vers le bas avec paddingBottom (cela fera apparaître comme un textInput avec un borderBottom)
  • (ou vous pouvez ajouter un autre style en fonction de la façon dont vous voulez qu'il ressemble)

Code:

<View style={styles.passwordContainer}>
  <TextInput
    style={styles.inputStyle}
      autoCorrect={false}
      secureTextEntry
      placeholder="Password"
      value={this.state.password}
      onChangeText={this.onPasswordEntry}
    />
  <Icon
    name='what_ever_icon_you_want'
    color='#000'
    size={14}
  />
</View>

Style:

passwordContainer: {
  flexDirection: 'row',
  borderBottomWidth: 1,
  borderColor: '#000',
  paddingBottom: 10,
},
inputStyle: {
  flex: 1,
},

(Remarque: l'icône est sous le TextInput donc elle apparaît à l'extrême droite, si elle était au-dessus de TextInput apparaît sur la gauche.)

Vous pouvez utiliser ce module qui est facile à utiliser: https://github.com/halilb/react-native-textinput-effects

, Vous pouvez envelopper votre TextInput dans View.

<View>
  <TextInput/>
  <Icon/>
<View>

Et calculer dynamiquement la largeur, si vous voulez ajouter une icône,

iconWidth = 0.05*viewWidth 
textInputWidth = 0.95*viewWidth

Sinon textInputwWidth = viewWidth.

View et TextInput La couleur d'arrière-plan sont toutes les deux blanches. (Petit hack)

Ici vous avez un exemple que j'ai pris de mon propre projet, je viens de supprimer ce que je pensais que nous n'avions pas besoin pour l'exemple.

import React, { Component } from 'react';
import {
  Text,
  TouchableOpacity,
  View,
  StyleSheet,
  Dimensions,
  Image
} from 'react-native';

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this._makeYourEffectHere = this._makeYourEffectHere.bind(this);

    this.state = {
        showPassword: false,
        image: '../statics/showingPassImage.png'
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}>
          <Text>button</Text>
          <Image style={styles.image} source={require(this.state.image)}></Image>
        </TouchableOpacity>
        <TextInput password={this.state.showPassword} style={styles.input} value="abc" />
      </View>
    );
  }

  _makeYourEffectHere() {
    var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png';
    this.setState({showPassword: !this.state.showPassword, image: png});
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
  },
  button: {
    width: Dimensions.get('window').width * 0.94,
    height: 40,
    backgroundColor: '#3b5998',
    marginTop: Dimensions.get('window').width * 0.03,
    justifyContent: 'center',
    borderRadius: Dimensions.get('window').width * 0.012
  },
  image: {
    width: 25,
    height: 25,
    position: 'absolute',
    left: 7,
    bottom: 7
  },
  input: {
    width: Dimensions.get('window').width * 0.94,
    height: 30
  }
});

module.exports = YourComponent;

J'espère que ça vous aidera.

Faites-moi savoir si c'était utile.