React Native animierte Hintergrundfarbansicht

Blog

React Native animierte Hintergrundfarbansicht

React Native Animated Background Color View.A modifiziertes React Native |_+_| Komponente, die es animiert |_+_| wenn |_+_| Prop ändert. Funktioniert auf iOS und Android.

Beispiel

reagieren-nativ-animierte-Hintergrund-Farbansicht

Installation

View

Javascript erhält die IP-Adresse des lokalen Computers

Verwendungszweck

Importieren Animierter HintergrundFarbeAnsicht Komponente

backgroundColor

Verwenden Sie wie folgt:

color

Jedes Mal, wenn |_+_| prop-Wert ändert die |_+_| werde die verwenden Reagieren Sie native Timing-Animation um vom vorherigen Wert zum aktuellen Wert zu animieren.

Javascript-Prüfung undefiniert oder null oder leer

Auf Komponentenhalterung animieren

Sie können auch eine Anfangsfarbe für die Hintergrundfarbe angeben, die animiert werden soll, wenn die Komponente bereitgestellt wird:

npm install react-native-animated-background-color-view --save

Beim Montieren der Komponente |_+_| wird |_+_| und dann zu |_+_| animieren.

Verwenden der |_+_| Stütze

Die |_+_| Komponente funktioniert genauso wie das Standard React Native |_+_| Komponente. |_+_| ist für die Verschachtelung in anderen |_+_| Komponenten oder andere |_+_| Komponenten und kann 0 bis viele untergeordnete Elemente eines beliebigen Typs haben.

import { AnimatedBackgroundColorView } from 'react-native-animated-background-color-view';

Aufbau

Sie können |_+_| . konfigurieren indem Sie die folgenden Requisiten übergeben:

Stütze Typ/gültige Werte Ursprünglich Bezeichnung
Farbe Schnur der Farbwert, auf den die Komponente |_+_| wird animieren
verzögern Nummer color die Länge in Millisekunden, die die Komponente wartet, bevor sie zum nächsten |_+_| . animiert wird
Dauer Nummer backgroundColor die Länge in Millisekunden, die die Timing-Animation dauert
Lockerung Reagieren Sie gebürtig Lockerungsfunktion die Easing-Funktion zum Definieren der Animationskurve
initialColor Schnur backgroundColor der Farbwert, aus dem die Komponente |_+_| wird auf dem Berg animiert
Stil Reagieren Sie gebürtig ViewPropTypes.style blue zusätzliche Stile, die auf die Komponente angewendet werden

Gebaut mit

Versionierung

ich benutze SemVer zur Versionierung. Die verfügbaren Versionen finden Sie im Tags in diesem Repository .

Autoren

Siehe auch die Liste der Mitwirkende die an diesem Projekt teilgenommen haben.

Beitragen

Bitte senden Sie eine Pull-Anfrage mit allen Funktionen/Fixes für das Projekt. Ich entschuldige mich im Voraus für die langsame Aktion bei Pull-Requests und Problemen. Bitte folgen Sie den ESLint-Regeln für das Projekt.

netflix/tv8 code eingeben

Download-Details:

Autor: joeyschroeder

GitHub: https://github.com/joeyschroeder/react-native-animated-background-color-view

#react-native #reactjs