web-dev-qa-db-fra.com

Comment insérer une icône dans un TextInput dans React Native?

Je pense avoir quelque chose comme ceci https://Android-arsenal.com/details/1/3941 où vous avez une icône sur laquelle vous appuyez pour afficher le mot de passe en texte clair, pas en tant que points. Cependant, je n'ai trouvé aucun composant personnalisé susceptible de m'aider.

Je ne veux pas consacrer trop de temps à une fonctionnalité aussi mineure, alors je demande sans avoir encore rien essayé: existe-t-il un composant personnalisé que j'ai manqué? Sinon, existe-t-il un moyen simple d'ajouter des enfants à TextInput? Ou devrais-je simplement avoir TextInput et Touchable côte à côte?

react-native
29
Zygro

Vous pouvez utiliser une combinaison de View, Icon et TextInput comme suit:

<View style={styles.searchSection}>
    <Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
    <TextInput
        style={styles.input}
        placeholder="User Nickname"
        onChangeText={(searchString) => {this.setState({searchString})}}
        underlineColorAndroid="transparent"
    />
</View>

et utilisez flex-direction pour le style

searchSection: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
},
searchIcon: {
    padding: 10,
},
input: {
    flex: 1,
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingLeft: 0,
    backgroundColor: '#fff',
    color: '#424242',
},

Les icônes ont été tirées de "réagir-natif-vecteur-icônes"

46
Anton Artemev

En gros, vous ne pouvez pas insérer une icône dans 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 ça fonctionne:

  • placez les deux Icône _ et Entrée de texte à l'intérieur d'une vue parent
  • définissez flexDirection du parent sur ‘row’ qui alignera les enfants les uns à côté des autres
  • donnez TextInput flex 1 pour qu'il prenne toute la largeur de la vue parente
  • donnez vue parent un (borderBottomWidth} et abaissez cette bordure avec paddingBottom (cela le fera ressembler à un textInput avec un borderBottom)
    • (ou vous pouvez ajouter n'importe quel style en fonction de votre apparence)

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 se trouve sous TextInput. Elle apparaît donc à l'extrême droite. Si elle était au-dessus de TextInput, elle apparaîtrait à gauche.)

11
linasmnew

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

1
Léo

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 de fond est blanche. (Petit bidouillage)

1
Sobol Roman

Ici vous avez un exemple que j'ai tiré de mon propre projet, je viens de supprimer ce que je pensais ne pas avoir besoin de cet 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 t'aide.

Faites-moi savoir si c'était utile.

0
Facundo La Rocca
//This is an example code to show Image Icon in TextInput// 
import React, { Component } from 'react';
//import react in our code.

import { StyleSheet, View, TextInput, Image } from 'react-native';
//import all the components we are going to use. 

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.SectionStyle}>
          <Image
            //We are showing the Image from online
            source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/user.png',}}

            //You can also show the image from you project directory like below
            //source={require('./Images/user.png')}

            //Image Style
            style={styles.ImageStyle}
          />

          <TextInput
            style={{ flex: 1 }}
            placeholder="Enter Your Name Here"
            underlineColorAndroid="transparent"
          />
        </View>
         <View style={styles.SectionStyle}>
          <Image
            //We are showing the Image from online
            source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}

            //You can also show the image from you project directory like below
            //source={require('./Images/phone.png')}

            //Image Style
            style={styles.ImageStyle}
          />

          <TextInput
            style={{ flex: 1 }}
            placeholder="Enter Your Mobile No Here"
            underlineColorAndroid="transparent"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },

  SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: 0.5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5,
    margin: 10,
  },

  ImageStyle: {
    padding: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
  },
});

Expo

0
Viraj Singh