Wie kann ich ein Symbol in einen TextInput in React Native einfügen?

Lesezeit: 3 Minuten

Benutzer-Avatar
Zygro

Ich überlege mir sowas zuzulegen https://android-arsenal.com/details/1/3941 wo Sie ein Symbol haben, das Sie drücken, um das Passwort als Klartext anzuzeigen, nicht als Punkte. Ich konnte jedoch keine benutzerdefinierte Komponente finden, die mir helfen würde.

Ich möchte nicht zu viel Zeit auf ein so kleines Feature verwenden, also frage ich, ohne noch etwas versucht zu haben: Gibt es eine benutzerdefinierte Komponente, die ich übersehen habe? Wenn nicht, gibt es eine einfache Möglichkeit, Kinder zu TextInput hinzuzufügen? Oder sollte ich nur TextInput und Touchable nebeneinander haben?

Benutzer-Avatar
Anton Artemiev

Sie können die Kombination von View, Icon und TextInput wie folgt verwenden:

<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>

und verwenden Sie Flex-Richtung für das Styling

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',
},

Icons wurden von “react-native-vector-icons” übernommen

  • Dies ist der Weg, es zu tun, wenn Sie keine Bibliothek verwenden möchten. Nebenbemerkung: Wenn Sie möchten, dass das Symbol “verschwindet”, müssen Sie eine Stütze übergeben, um zu wissen, ob eine Suche aktiv ist oder nicht, und dann die Sichtbarkeit des Symbols basierend auf dieser Suchstütze umschalten.

    – Sara Inés Calderón

    10. Januar 2020 um 16:05 Uhr

Benutzer-Avatar
Linasmneu

Grundsätzlich können Sie ein Symbol nicht in eine Texteingabe einfügen, aber Sie können es vortäuschen, indem Sie es in eine Ansicht einschließen und einige einfache Stilregeln festlegen.

So funktioniert das:

  • beides setzen Symbol und Text Eingabe in einem übergeordnete Ansicht
  • einstellen flexDirection des Elternteils zu ‘die Zeile’ wodurch die Kinder nebeneinander ausgerichtet werden
  • geben TextInputflex 1 Es nimmt also die volle Breite der übergeordneten Ansicht ein
  • geben übergeordnete Ansicht a borderBottomWidth und schieben Sie diese Grenze mit nach unten PolsterungUnten (Dadurch erscheint es wie ein normaler textInput mit einem borderBottom)
    • (oder Sie können einen anderen Stil hinzufügen, je nachdem, wie es aussehen soll)

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>

Stil:

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

(Hinweis: Das Symbol befindet sich unter TextInput, sodass es ganz rechts angezeigt wird. Wenn es sich über TextInput befände, würde es links angezeigt.)

  • Das ist großartig! Eine Verbesserung ist hinzuzufügen alignItems: 'center' zu passwordContainer, um Eingabe und Symbol vertikal zu zentrieren

    – Patrissol Kenfack

    17. Juni 2020 um 4:37 Uhr


Dies funktioniert bei mir in ReactNative 0.60.4

Aussicht

<View style={styles.SectionStyle}>
    <Image
        source={require('../assets/images/ico-email.png')} //Change your icon image here
        style={styles.ImageStyle}
    />

    <TextInput
        style={{ flex: 1 }}
        placeholder="Enter Your Name Here"
        underlineColorAndroid="transparent"
    />
</View>

Stile

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',
}

Falls es nützlich ist, teile ich mit, was ich für eine saubere Lösung halte:

<View style={styles.inputContainer}>
  <TextInput
    style={styles.input}
    onChangeText={(text) => onChange(text)}
    value={value}
  />
  <Icon style={styles.icon} name="your-icon" size={20} />
</View>

und dann in deinem css

 inputContainer: {
    justifyContent: 'center',
  },
  input: {
    height: 50,
  },
  icon: {
    position: 'absolute',
    right: 10,
  }

 import { TextInput } from 'react-native-paper';

 <TextInput
      label="Password"
      secureTextEntry
      right={<TextInput.Icon name="eye" />}
    />

  • Sie können sogar einige Funktionen hinzufügen right={

    – Wladimir Salguero

    26. Mai um 16:05 Uhr

Benutzer-Avatar
Löwe

Sie können dieses einfach zu bedienende Modul verwenden: https://github.com/halilb/react-native-textinput-effects

  • Sie können sogar einige Funktionen hinzufügen right={

    – Wladimir Salguero

    26. Mai um 16:05 Uhr

Benutzer-Avatar
Karl Taylor

Sie können Ihre wickeln TextInput in View.

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

und Breite dynamisch berechnen, wenn Sie ein Symbol hinzufügen möchten,

iconWidth = 0.05*viewWidth 
textInputWidth = 0.95*viewWidth

Andernfalls textInputwWidth = viewWidth.

View und TextInput Hintergrundfarbe sind beide weiß. (Kleiner Hack)

1178840cookie-checkWie kann ich ein Symbol in einen TextInput in React Native einfügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy