Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind Requisiten in React Native?

WBOY
Freigeben: 2023-08-29 18:13:10
nach vorne
1024 Leute haben es durchsucht

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;}}
/>
Nach dem Login kopieren

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:
&#39;https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png&#39;
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);
Nach dem Login kopieren

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: &#39;https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png&#39;
   };
   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;
Nach dem Login kopieren

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>
   );
}
Nach dem Login kopieren

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>
   );
}
Nach dem Login kopieren

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 &#39;react&#39;;
import { Text, View } from &#39;react-native&#39;;

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;
Nach dem Login kopieren

Ausgabe

React Native 中的 props 是什么?

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!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!