Zum Inhalt springen
Toolars
Erkunden
Fehler melden

Entwickler · Lokal-Werkzeug

Schatten für React Native

React Native Shadow Generator

Vergleiche klassische iOS- und Android-Schatten mit dem boxShadow-Stil der New Architecture in React Native und kopiere die Styles samt Plattformhinweisen.

Aufgabenpfad / von der Eingabe zum Ergebnis

Wähle die Zielplattform

Läuft lokal · Nichts wird hochgeladen

Wie Schatten für React Native funktioniert, Datenschutz und verwandte Tools

Aufgabenpfad / von der Eingabe zum Ergebnis

So generierst du einen React-Native-Schatten

  1. 01

    Wähle die Zielplattform

    Wähle zuerst die Ausgabe-API: Legacy erzeugt plattformspezifische iOS-Schatteneigenschaften oder Android-elevation; boxShadow erzeugt einen äußeren Schatten für Android 9+ mit React Native New Architecture. Im Legacy-Modus wählst du iOS, Android oder Beide; Beide ist der Standard.

  2. 02

    Forme den iOS-Schatten

    Wähle eine Schattenfarbe, dann setze Versatz X und Versatz Y von -100 bis 100 px, Deckkraft von 0 bis 1 in Schritten von 0,01 und Radius von 0 bis 100 px. Werte außerhalb eines Bereichs werden automatisch darauf begrenzt, du kannst also frei tippen, ohne kaputten Code zu erzeugen.

  3. 03

    Lege die Android-Elevation fest

    Passe Elevation von 0 bis 24 an. Android-Schatten entstehen aus Elevation statt aus Versätzen, dieser Wert treibt also die Android-Hälfte der Ausgabe, während die iOS-Zahlen sie unberührt lassen. Im Beide-Modus bleiben die iOS-Steuerelemente aktiv, die beiden Hälften des Snippets lassen sich also nebeneinander abstimmen.

  4. 04

    Prüfe die Live-Vorschau

    Die Live-Vorschau-Karte rendert eine Browser-box-shadow-Annäherung der gewählten Plattform, aktualisiert bei jeder Änderung. Beispiel laden wirft ein erhöhtes Indigo-Beispiel ein, wenn du einen stärkeren Ausgangspunkt als den dezenten Standard willst.

  5. 05

    Kopiere den generierten Code

    Nutze Code kopieren oder .ts herunterladen, um das StyleSheet-Snippet — gespeichert als toolars-react-native-shadow.ts — in dein Projekt zu übernehmen. Zurücksetzen stellt den Standardschatten wieder her, wenn du neu anfangen willst.

Tool-Fakten

Verarbeitung
In deinem Browser
Eingabe verlässt dieses Gerät
Nie
Aufbewahrung
Nichts wird gespeichert
Preis
Kostenlos

Deine Eingabe bleibt im Browser.

Schatten für React Native nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.

Lokale Ausführung

Läuft im aktuellen Browser-Tab.

Keine versteckte Verarbeitung

Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.

Kein Konto erforderlich

Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.

Sofortiges Zurücksetzen

Leere den Tab, und die aktiven Arbeitsdaten sind weg.

Wann Schatten für React Native nützlich ist

Plattformübergreifende Stile

Erzeuge die iOS- und Android-Eigenschaften, die in denselben Komponentenstil gehören.

Design-Übergabe

Verwandle eine visuelle Schattenentscheidung in kopierfertigen React-Native-Code.

Schnelles Feintuning

Passe Tiefe, Farbe, Deckkraft, Radius und Versatz an einer Live-Annäherung an.

Was Schatten für React Native tatsächlich tut

Die Designdatei zeigt eine Karte, die genau so schwebt, und jetzt muss sie zweimal existieren: einmal als iOS-Schatteneigenschaften und einmal als Android-Elevation. Der Schatten-Generator für React Native lässt dich den Look gegen eine Live-Annäherung einstellen und den exakten StyleSheet-Block kopieren, statt Zahlen von Hand zu drehen und die App bei jeder Vermutung neu zu kompilieren. Legacy mit Beide kombiniert iOS-Schatteneigenschaften und Android-elevation im selben Snippet; prüfe Farbe und Aussehen auf jedem Gerät separat.

Häufige Fragen

Welchen Code erzeugt der Generator?
Ein TypeScript-Snippet, das StyleSheet aus react-native importiert und ein styles-Objekt mit einer einzigen card-Regel exportiert. Für iOS emittiert es shadowColor, shadowOffset mit width und height, shadowOpacity und shadowRadius; für Android emittiert es elevation (plus shadowColor im Nur-Android-Modus); Beide enthält die iOS-Eigenschaften und elevation zusammen.
Was sind die Standardwerte?
Der Standardschatten zielt auf Beide Plattformen mit der Farbe #111827, Versatz X bei 0, Versatz Y bei 8 px, Deckkraft bei 0,24, Radius bei 16 px und Elevation bei 8 — auch exakt das, was du siehst, wenn der Arbeitsbereich zum ersten Mal öffnet. Zurücksetzen kehrt zu diesen Werten zurück, und Beispiel laden tauscht eine stärkere Indigo-Vorgabe mit höherem Versatz und Radius ein.
Welche Farbformate werden akzeptiert?
Ein sechsstelliger Hex-Wert wie #111827. Alles, was keine gültige Hex-Farbe ist, fällt auf den Standard zurück, statt die Ausgabe kaputt zu machen, und gültige Werte werden im generierten Code zu Großbuchstaben normalisiert.
Ist die Vorschau exakt das, was das Gerät zeigen wird?
Nein, und die Vorschaukarte sagt das: Der Browser rendert eine box-shadow-Annäherung der gewählten Plattform, genug, um Einstellungen zu vergleichen, aber keine pixelperfekte Übereinstimmung. In den Modi iOS und Beide spiegelt sie deinen Versatz, Radius, Farbe und Deckkraft; im Android-Modus täuscht sie die Elevation-Anhebung, weil Browser kein Elevation-Konzept kennen. Bestätige den finalen Look immer auf einem echten Gerät oder Emulator.
Welche Wertebereiche werden akzeptiert?
Versatz X und Versatz Y laufen von -100 bis 100 px, Deckkraft von 0 bis 1 in Schritten von 0,01, Radius von 0 bis 100 px und Elevation von 0 bis 24. Eingaben außerhalb des Bereichs werden auf den nächsten gültigen Wert begrenzt, statt kaputten Code zu erzeugen.
Werden meine Einstellungen hochgeladen oder gespeichert?
Nein. Der Code wird lokal in diesem Tab generiert, keine Schatteneinstellungen werden gespeichert oder irgendwohin gesendet, und es ist kein Konto nötig.
Wann sollte ich den neuen boxShadow-Modus wählen?
Nutze ihn, wenn deine App die React Native New Architecture verwendet und dein Android-Ziel 9 oder höher ist. Dieser Modus exportiert einen einzelnen Outset-Schatten ohne Elevation. Für ältere Setups behalte die Legacy-Plattform-Eigenschaften. Blur-Radius und Legacy-Schattenradius sind keine pixelidentische Migration; prüfe den generierten Stil in deiner nativen App.

Weiter in Entwickler

Verwandte Aufgaben statt Sackgasse.

Wechsle in einen anderen fokussierten Arbeitsbereich, ohne zum vollständigen Index zurückzukehren.

Code zu Bild

Code to Image Converter

Exportiere hervorgehobenen Code als PNG oder SVG mit einstellbarer Schrift, Zeilennummern und 1x/2x-Skalierung — bis 200 Zeilen, lokal gerendert.

Erstellen

URL-Slug-Generator

URL Slug Generator

Verwandle Titel und Beschriftungen lokal in saubere, kopierfertige URL-Slugs — wahlweise mit Bindestrichen oder Unterstrichen als Trennzeichen.

Erstellen

Base64-Kodierer/Dekodierer

Base64 Encoder/Decoder

Kodiere Text zu Base64 oder dekodiere ihn zurück — mit UTF-8-, URL-sicherer und Zeilenumbruch-Option sowie laufender Validierung, komplett lokal.

Konvertieren

HTML-Kodierer/Dekodierer

HTML Encoder/Decoder

Kodiere die fünf markup-kritischen Zeichen &, <, > und beide Anführungszeichen zu Entitäten oder dekodiere benannte und numerische Referenzen zurück.

Konvertieren