Que sont les accessoires dans React Native ?

Les props sont des propriétés qui aident à modifier les composants React. Les composants créés peuvent être utilisés avec différents paramètres en utilisant le concept props. À l'aide d'accessoires, vous pouvez transmettre des informations d'un composant à un autre tout en réutilisant le composant selon vos besoins.

Si vous maîtrisez ReactJS, vous serez familier avec les accessoires, les mêmes concepts suivis dans React Native.

Regardons un exemple pour expliquer ce que sont les accessoires.

Exemple 1 : accessoires dans les composants intégrés de React Native

Considérez le composant image -

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

style et source sont des propriétés, c'est-à-dire des accessoires pour le composant image. Les accessoires de style sont utilisés pour ajouter des styles, c'est-à-dire la largeur, la hauteur, etc., tandis que les accessoires source sont utilisés pour attribuer l'URL à l'image à afficher à l'utilisateur. Source, styles et propriétés intégrées pour le composant Image.

Vous pouvez également utiliser une variable qui stocke l'URL et l'utiliser pour l'attribut source comme indiqué ci-dessous -

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>
);

L'exemple ci-dessous montre l'affichage d'une image simple à l'aide d'accessoires intégrés -

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;

Exemple 2 : Accessoires dans un fichier personnalisé composant

Vous pouvez utiliser des accessoires pour envoyer des informations d'un composant à un autre. Dans l'exemple ci-dessous, deux composants personnalisés sont créés : Étudiant et Sujet.

Les composants du thème sont les suivants -

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

Ce composant prend des accessoires de paramètres. Il est utilisé à l'intérieur du composant Text pour afficher le nom sous la forme props.name. Voyons comment transmettre les propriétés du composant étudiant au composant sujet.

Le composant étudiant est le suivant -

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

Dans le composant Étudiant, le composant Sujet est utilisé avec l'attribut name. Les valeurs transmises sont les Mathématiques, la Physique et la Chimie. Les thèmes peuvent être réutilisés en passant différentes valeurs à l'attribut name.

Il s'agit d'un exemple fonctionnel avec les composants et les résultats Étudiant et Sujet.

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;

sortie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!