Was sind Requisiten in React Native?

Props sind Eigenschaften, die dabei helfen, React-Komponenten zu ändern. Die erstellten Komponenten können mithilfe des Props-Konzepts mit unterschiedlichen Parametern verwendet werden. Mithilfe von Requisiten können Sie Informationen von einer Komponente an eine andere weitergeben und gleichzeitig die Komponente gemäß Ihren Anforderungen wiederverwenden.

Wenn Sie sich mit ReactJS auskennen, sind Sie mit Requisiten vertraut, die gleichen Konzepte gelten auch für React Native.

Schauen wir uns ein Beispiel an, um zu erklären, was Requisiten sind.

Beispiel 1: Requisiten in integrierten React Native-Komponenten

Betrachten Sie die Image-Komponente –

<Image
   style={styles.stretch} source={{uri: &#39;https://pbs.twimg.com/profile_images/486929358120964097   /gNLINY67_400x400.png&#39;}}
/>

Style und Source sind Eigenschaften, d. h. Requisiten für die Image-Komponente. Die Stil-Requisiten werden verwendet, um Stile hinzuzufügen, z. B. Breite, Höhe usw., während die Quell-Requisiten verwendet werden, um dem Bild die URL zuzuweisen, die dem Benutzer angezeigt werden soll. Quelle und Stile sowie integrierte Eigenschaften für die Bildkomponente.

Sie können auch eine Variable verwenden, die die URL speichert, und sie wie unten gezeigt für das Quellattribut verwenden –

let imgURI = {
   uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);

Das folgende Beispiel zeigt die Anzeige eines einfachen Bildes mit integrierten Requisiten –

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";

const MyImage = () => {
   let imgURI = {
      uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
   };
   return (
      <View style={styles.container}>
         <Image style={styles.stretch} source={imgURI} />
      </View>
   );
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: &#39;stretch&#39;,
   }
});
export default MyImage;

Beispiel 2: Requisiten innerhalb eines benutzerdefinierten Komponente

Sie können Requisiten verwenden, um Informationen von einer Komponente an eine andere zu senden. Im folgenden Beispiel werden zwei benutzerdefinierte Komponenten erstellt: Student und Topic.

Themenkomponenten sind wie folgt:

const Subject = (props) => {
   return (
      <View>
      <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
      </View>
   );
}

Diese Komponente benötigt Parameter-Requisiten. Es wird innerhalb der Textkomponente verwendet, um den Namen als props.name anzuzeigen. Sehen wir uns an, wie Eigenschaften von der Schülerkomponente an die Fachkomponente übergeben werden.

Die Student-Komponente lautet wie folgt:

const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
      </View>
   );
}

In der Student-Komponente wird die Subject-Komponente zusammen mit dem Namensattribut verwendet. Die übergebenen Werte sind Mathematik, Physik und Chemie. Themes können wiederverwendet werden, indem unterschiedliche Werte an das Namensattribut übergeben werden.

Dies ist ein funktionierendes Beispiel mit Student- und Topic-Komponenten und -Ausgabe.

import React from 'react';
import { Text, View } from 'react-native';

const Subject = (props) => {
   return (
      <View>
         <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!      </Text>
      </View>
   );
}
const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
         </View>
   );
}
export default Student;

Ausgabe

Das obige ist der detaillierte Inhalt vonWas sind Requisiten in React Native?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!