Reagieren Sie auf Native Box Shadow

Das heutige Tutorial zeigt, wie Sie Box-Schatten in einer React Native-App für Android- und iOS-Geräte verwenden.

Reagieren Sie auf Native Box Shadow

Box Shadows sind in einer React Native App nicht immer einfach zu implementieren. Da Entwickler für Android- und iOS-Plattformen entwerfen müssen, kann die Implementierung einheitlicher Box-Schatten mit plattformspezifischen Implementierungstechniken zeitaufwändig sein.

Wir können vier Schatteneigenschaften von React Native verwenden, um Schattenboxen für iOS-Geräte zu generieren.

1. Die shadowColor definiert die Farbe des Boxschattens. Wir sollten betonen, dass dies das einzige Beispiel von shadowProp ist, das mit Android-Geräten funktioniert.
2. Die Prop shadowOffset erlaubt Objekte mit Parametern width und height, die einen numerischen Wert haben.
3. ShadowOpacity steuert die Transparenz des Boxschattens. Der Wert der Requisite variiert von 0 bis 1, wobei 0 für vollständige Transparenz und 1 für vollständige Deckkraft steht.
4. Der shadowRadius akzeptiert eine Ganzzahl als Wert, um den Unschärferadius der Komponente festzulegen. Die Unschärfe nimmt mit zunehmendem Wert zu, wodurch der Schatten breiter und heller wird. Negative Werte werden für diese Requisite nicht akzeptiert.

Lassen Sie uns diese Eigenschaften anwenden, indem Sie einer Kartenkomponente einen Boxschatten hinzufügen und Folgendes tun:

Beispielcode:

import {StyleSheet, Text, View} from 'react-native';
import {Card} from 'react-native-paper';

export default function App() {
  return (
    <View style={[styles.card, styles.shadowProp]}>
      <View>
        <Text style={styles.heading}>React Native Box Shadow</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 13,
  },
  card: {
    backgroundColor: "red",
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: "20%",
    marginVertical: 10,
  },
  shadowProp: {
    shadowColor: "black",
    shadowOffset: { width: 2, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 5,
  },
});

Der Code veranlasst die App, eine Karte mit einem Kästchenschatten zu generieren.

In Android können wir Box-Schatten mit dem Prop elevation erstellen, das die API Android Elevation verwendet. Es gibt dem Objekt einen Schlagschatten und ändert die Z-Reihenfolge für überlappende Ansichten.

Lassen Sie uns einer Kartenkomponente einen Box-Schatten hinzufügen, um zu sehen, wie man ihn auf diese Weise verwendet. Zunächst sollten wir beachten, dass das Attribut styles.elevation nur funktioniert, wenn es auf einen <View>-Teil angewendet wird:

Beispielcode:

import {Card} from 'react-native-paper';

import {StyleSheet, Text, View} from './App/react-native';

export default function App() {
  return (<View style = {[styles.card, styles.elevation]}><View>
          <Text style = {styles.heading}>React Native Box
              Shadow</Text>
      </View>
          <Text>Using the elevation style prop</Text>
    </View>);
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 13,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: '30%',
    marginVertical: 10,
    marginLeft: 50,
    marginTop: 50,
  },
  elevation: {
    elevation: 30,
    shadowColor: 'red',
  },
});

Wir haben das Android-Gerät angeschlossen, um zu überprüfen, ob der Code funktioniert hat oder nicht. Siehe die folgende Ausgabe, und es funktioniert wie erwartet:

Wir haben keine Kontrolle über den Unschärferadius, die Deckkraft oder den Versatz des Kastenschattens; Wir haben die Kontrolle über seine Farbe. Basierend auf dem vorherigen Vortrag haben wir gelernt, wie man Schatteneffekte in React-Native-Mobilanwendungen erstellt.

Wir haben von den vielen Eigenschaften erfahren, die BoxShadow und BorderShadow unterstützen. Wir haben dem Text, dem Feld und dem Rahmen einen Schatteneffekt hinzugefügt.

Die Syntax zum Erstellen eines Schatteneffekts in React-Native ist relativ einfach. Mit etwas Skripting kann man also eine fantastische Benutzeroberfläche mit einem Schatteneffekt erstellen. Dieser Effekt wird hauptsächlich verwendet, um Bewegungen zu verfolgen und Oberflächenkanten zu bestimmen.