Stellen Sie die Bildbreite in Prozent in React Native ein

Dieser Artikel zeigt, wie wir die Breite in einer React-Native-App im Prozentformat einstellen können. Außerdem werden wir das Thema anhand notwendiger Beispiele und Erklärungen diskutieren, um das Thema zu vereinfachen.

Stellen Sie die Bildbreite in Prozent in React Native ein

Nicht alle Geräte enthalten die gleiche Größe. In einem responsiven Design ist es notwendig, dass ein Element seine Größe basierend auf der Bildschirmgröße des Geräts ändert.

Die Lösung für dieses Problem besteht darin, die Größe des Elements in einem Prozentformat zu definieren. Auf diese Weise ändert sich die Größe des Elements automatisch basierend auf der Bildschirmgröße des Geräts.

Unser Beispiel unten zeigt, wie wir den Breitenwert in einem Prozentformat angeben können. Das Code-Snippet für unser Beispiel sieht wie folgt aus.

// importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://www.delftstack.com/assets/img/logo.png',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );
}
/ / Providing style to the app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
  },
});

Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen.

<Image style={styles.img} source={{ uri: 'https://www.delftstack.com/assets/img/logo.png', }} />

Nachdem wir das obige Codezeilenbild eingefügt haben, legen wir die folgenden Eigenschaften im Stylesheet fest.

Für die Container:

Für das Bild:

Wenn Sie den obigen Beispielcode ausführen, erhalten Sie die folgende Ausgabe.

Ausgang:

Beachten Sie, dass der oben geteilte Code in React-Native erstellt wurde und wir die Expo-CLI verwendet haben, um die App auszuführen. Außerdem benötigen Sie die neueste Version von Node.js.

Wenn Sie Expo-CLI nicht in Ihrer Umgebung haben, installieren Sie es zuerst.