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