15 React Native Material Design, das Sie 2020 kennen sollten

Blog

15 React Native Material Design, das Sie 2020 kennen sollten

15 React Native Material Design, das Sie 2020 kennen sollten

1. Schaltflächen für natives Material reagieren

Materialtasten mit einheitlichem Verhalten auf iOS und Android.

Schaltflächen für natives Material reagieren

Merkmale

  • Einfach zu verwenden
  • Einheitliches Erscheinungsbild auf iOS und Android
  • Animierte Zustandsübergänge
  • Wellenanimation bei Berührung
  • Reine Javascript-Implementierung

Auf GitHub ansehen

2.Reagieren Sie native Materialwelligkeit

Basiskomponente für berührbare Elemente.

Reagieren Sie native Materialwelligkeit

Merkmale

um E-Mails auf dem iPhone zu vernetzen
  • Einfach zu verwenden
  • Konfigurierbar
  • Einheitliches Erscheinungsbild auf iOS und Android
  • Kann als Drop-In-Ersatz für verwendet werden BerührbarOhneFeedback
  • Reine Javascript-Implementierung

Auf GitHub ansehen

3.Material Brot

Hochgradig anpassbare React Native Material Design-Komponenten.

Material Brot

Merkmale

  • Hochgradig anpassbare native React-Komponenten.
  • Plattformübergreifende Unterstützung: React Native (iOS, Android), React-native-web (Browser), Electron (Windows, Mac, Linux), React-Native-Windows, React-Native-Macos, Next.js, Expo, Vue Native
  • Unterstützung für Material Design 2.0-Komponenten.
  • Live reagieren native Demos, die Sie in Ihrem Browser bearbeiten können.
  • Typoskript-Unterstützung

Auf GitHub ansehen

4. Dialog Natives Material reagieren

Komponenten des Materialdesign-Dialogs für React Native. Nur JavaScript, für iOS und Android.

Dialog Natives Material reagieren

Auf GitHub ansehen

5.React Native js Bottom Sheet

Modale Bottomsheet-Komponente für Android und iOS, die den Richtlinien von Material Design folgt.

PHP-Beispielprojekte mit Quellcode

React Native js unteres Blatt

Auf GitHub ansehen

6.Reagieren Sie natives Material auswählen

Eine von Selectize inspirierte React Native-Komponente, die den Material Design-Richtlinien folgt.
Reagieren Sie natives Material auswählen

Arbeitsbeispiele werden innerhalb des Projekts bereitgestellt. Navigieren Sie nach dem Herunterladen zu einem beliebigen Unterordner mit Beispielen und führen Sie entweder npm install oder Garn aus.

Merkmale

  • Typdefinitionen mit Typescript
  • Einhaltung der Materialdesignrichtlinien
  • Einheitliches Erscheinungsbild auf iOS und Android
  • Zustandsübergänge (normal, fokussiert und fehlerhaft)
  • Hochgradig anpassbare Stile und Requisiten der inneren TextInput-Komponente
  • Reine Javascript-Implementierung
  • Minimale Einrichtung (keine Requisiten erforderlich)

Auf GitHub ansehen

7.Reagieren Sie natives Material-Dropdown

Material-Dropdown mit konsistentem Verhalten auf iOS und Android
Reagieren Sie natives Material Dropdown

Boxstreams auf reddit

Merkmale

  • Einfach zu verwenden
  • Einheitliches Erscheinungsbild auf iOS und Android
  • Anpassbare Schriftgröße, Farben und Animationsdauer
  • Dynamische Dropdown-Größe und Position
  • Konfigurierbare Anzahl sichtbarer Elemente
  • RTL-Unterstützung
  • Reine Javascript-Implementierung

Auf GitHub ansehen

8. Menü für natives Material reagieren

Reine JavaScript-Materialmenükomponente für React Native.

Menü Natives Material reagieren

Demo: https://snack.expo.io/@mxck/react-native-material-menu-demo

Auf GitHub ansehen

9. Native Floating-Aktion reagieren

Materialdesign-Aktionstaste für React Native

Reagieren Sie Native Floating-Aktion

Auf GitHub ansehen

10.React Native Paper

Plattformübergreifendes Materialdesign für React Native.

React Natives Papier

was ist bcd-coin

Merkmale

  • Befolgt Materialdesign-Richtlinien
  • Funktioniert sowohl auf iOS als auch auf Android gemäß den Richtlinien zur Plattformanpassung
  • Vollständige Themenunterstützung

Demo: https://reactnativepaper.com

Auf GitHub ansehen

11.React Native: Native App-Tour-Bibliothek

Diese Bibliothek ist eine React Native-Brücke um native App-Tourbibliotheken. Es ermöglicht schöne Touren zu zeigen / zu führen:

React Native: Native App-Tour-Bibliothek
Diese Bibliothek ist eine React Native-Brücke um native App-Tourbibliotheken. Es ermöglicht schöne Touren zu zeigen / zu führen:

Native App-Tour-Bibliothek

Auf GitHub ansehen

12.Reagieren Sie natives Material untere Navigation

Reagieren Sie natives Material untere Navigation

Ein schönes, anpassbares und benutzerfreundliches
Material Design Bottom Navigation für React-Native.

  • Reines JavaScript. Keine nativen Abhängigkeiten. Keine Verknüpfung. Keine Hindernisse.
  • Sieht wunderschön aus. Atemberaubende und flüssige Animationen. Sie werden nicht glauben, dass es sich nicht um eine native Ansicht handelt.
  • Passe es an. Sie können fast alles anpassen, damit es perfekt zu Ihrer App passt.
  • Einfach zu verwenden. Verwendet etablierte Reaktionsmuster sowohl für die einfache als auch für die erweiterte Verwendung.
  • Steckbar. Enthält anpassbare Registerkarten und Abzeichen. Nicht genug? Erstellen und verwenden Sie Ihre eigenen!

Demo: https://timomeh.gitbook.io/material-bottom-navigation/

Auf GitHub ansehen

13.React Native: Bildschirm sperren

Eine benutzerfreundliche, anpassbare und Material Design-fähige Muster-/Pin-Sperransicht für Android und iOS.

Bildschirm sperren

Auf GitHub ansehen

14. Benutzeroberfläche für natives Material reagieren

Hochgradig anpassbare Materialdesign-Komponenten für React Native

Benutzeroberfläche für natives Material reagieren

Auf GitHub ansehen

15.Reagieren Sie die Registerkarten für natives Material

Material Design-Implementierung von Tabs

kratze twitter ohne api

Registerkarten für natives Material reagieren

Auf GitHub ansehen

16.React Native: Material Shadows

Diese Bibliothek ist eine dünne React Native Bridge um die harjot-oberai/MaterialShadows-Bibliothek. Es lässt sich nahtlos in Materialschatten integrieren. Die Bibliothek hebt vorhandene Materialschatten auf die nächste Stufe, indem sie die folgenden Funktionen hinzufügt:

  • Konvexe Schatten: Die Schatten sind nicht nur rechteckig oder kreisförmig, sie können je nach Ansicht und Inhalt jede konvexe Form annehmen.
  • Unterstützung für Schattenversätze: Die Bibliothek ermöglicht es Entwicklern, den X- und Y-Versatz für die Schatten festzulegen.
  • Unterstützung für Schattenintensität: Die Bibliothek unterstützt auch die Einstellung der Schattenintensität über das shadowAlpha-Attribut.
  • Schatten für halbtransparente Ansichten: Die Bibliothek lässt Schatten für halbtransparente Ansichten zu.
  • Unterstützung für asynchrone Schattenberechnungen: Die Bibliothek ermöglicht, dass die Vorgänge asynchron sind, um zu vermeiden, dass der UI-Thread für lange Berechnungen blockiert wird.
  • Schattenanimationen : Die Bibliothek unterstützt Ausblendanimationen für Schatten.

Auf GitHub ansehen

#reactjs #react-native