Eingabekomponente für React Native zum Hinzufügen und Entfernen von Tags

Blog

Eingabekomponente für React Native zum Hinzufügen und Entfernen von Tags

Eingabekomponente für React Native zum Hinzufügen und Entfernen von Tags

reagieren-native-tags-eingabe

Vollständig anpassbare React Native-Eingabekomponente zum Hinzufügen von Tags zu einem Array. Die Tags werden als löschbare Chips angezeigt.



Npm-Repository

https://www.npmjs.com/package/react-native-tags-input



git repo

https://github.com/jimmybengtsson/react-native-tags-input

Einstieg

$ npm install react-native-tags-input --save



Requisiten

notwendig Typen Über
Stichworte Objekt Objekt mit einer leeren Zeichenfolge namens Schild und ein leeres Array namens TagsArray
updateState Funktion Funktion zum Übergeben für die Komponente, um den Elternstatus aktualisieren zu können
keyForTag Schnur String, um zu entscheiden, wann ein Tag hinzugefügt wird. Platz für Standard
containerStyle Stile Stile für die äußerste Ansichtskomponente
Etikett Schnur Text, der über der Eingabe angezeigt wird
labelStyle Stile Stile für Etikettentext
inputContainerStyle Stile Stile für die äußere Eingabekomponente
Eingabestil Stile Stile für die innere Eingabekomponente
linkesElement Element Element, das an den Eingang übergeben werden soll. Wie zum Beispiel ein Symbol.
leftElementContainerStyle Stile Stile für das linke Element innerhalb der Eingabe
rechtesElement Element Element, das an den Eingang übergeben werden soll. Wie zum Beispiel ein Symbol.
rightElementContainerStyle Stile Stile für das richtige Element in der Eingabe
TagsViewStyle Stile Stile für die Ansichtskomponente, die die Tag-Chips enthält
tagStyle Stile Styles für die Tag-Chips
tagTextStyle Stile Stile für den Text in einem Tag-Chip
Behinderte boolesch Aktive Eingabe oder nicht? falsch für Standard
deaktiviertInputStyle Stile Stile, wenn die Eingabe deaktiviert ist
Element löschen Element Wenn diese enthalten ist, wird das Löschsymbol durch das bereitgestellte Element ersetzt. (Danke an periabyte)
deleteIconStyles Stile Stile für das Löschsymbol
benutzerdefiniertesElement Element Element, das zwischen Eingang und Tags angezeigt werden soll. Zum Beispiel Vorschläge. (Automatische Vorschläge werden in einer zukünftigen Version implementiert)

Diese Komponente erbt auch alle nativen TextInput-Requisiten, die mit einem standardmäßigen React Native TextInput-Element geliefert werden .

Beispiele

Standard- und benutzerdefiniertes Beispiel

Beispiel für automatisches Vorschlagen mit customElement-prop

Standardbeispiel

import React, { Component } from 'react'; import { Dimensions, StyleSheet, View } from 'react-native'; import TagInput from 'react-native-tags-input'; export default class App extends React.Component { constructor(props) { super(props); this.state = { tags: { tag: '', tagsArray: [] }, }; } updateTagState = (state) => { this.setState({ tags: state }) }; render() { return ( ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Benutzerdefiniertes Beispiel

import React, { Component } from 'react'; import { Dimensions, StyleSheet, View } from 'react-native'; import {Icon} from 'react-native-elements'; import TagInput from 'react-native-tags-input'; const mainColor = '#3ca897'; export default class App extends React.Component { constructor(props) { super(props); this.state = { tags: { tag: '', tagsArray: [] }, tagsColor: mainColor, tagsText: '#fff', }; } updateTagState = (state) => { this.setState({ tags: state }) }; render() { return ( this.setState({tagsColor: '#fff', tagsText: mainColor})} onBlur={() => this.setState({tagsColor: mainColor, tagsText: '#fff'})} autoCorrect={false} tagStyle={styles.tag} tagTextStyle={styles.tagText} keysForTag={', '}/> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: mainColor, }, textInput: { height: 40, borderColor: 'white', borderWidth: 1, marginTop: 8, borderRadius: 5, padding: 3, }, tag: { backgroundColor: '#fff' }, tagText: { color: mainColor }, });

Beitragen

Pull-Requests sind willkommen. Bei größeren Änderungen öffnen Sie bitte zuerst ein Problem, um zu besprechen, was Sie ändern möchten.

Download-Details:

Autor: jimmybengtsson

GitHub: https://github.com/jimmybengtsson/react-native-tags-input

#reagieren-nativ #reagieren #programmierung