반응 네이티브의 소품은 무엇입니까?

소품은 반응 구성 요소를 수정하는 데 도움이 되는 속성입니다. 생성된 컴포넌트는 props 개념을 사용하여 다른 매개변수와 함께 사용할 수 있습니다. 소품을 사용하면 한 구성 요소에서 다른 구성 요소로 정보를 전달할 수 있으며 동시에 요구 사항에 따라 구성 요소를 재사용할 수 있습니다.

ReactJS에 정통하다면 props에 익숙할 것입니다. React Native에서도 동일한 개념을 따릅니다.

props가 무엇인지 설명하는 예를 살펴보겠습니다.

예제 1:React Native 내장 컴포넌트 내의 Props

이미지 구성 요소 고려 -

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

스타일 및 소스 속성, 즉 이미지 구성 요소의 소품입니다. style props는 너비, 높이 등의 스타일을 추가하는 데 사용되며 source props는 사용자에게 표시할 이미지에 url을 할당하는 데 사용됩니다. 이미지 구성 요소의 소스 및 스타일 및 기본 제공 소품.

URL을 저장하는 변수를 사용하고 아래와 같이 소스 소품에 사용할 수도 있습니다 -

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

아래 예는 내장 props를 사용하여 간단한 이미지를 표시하는 것을 보여줍니다 -

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: 'stretch',
   }
});
export default MyImage;

예시 2:맞춤 구성요소 내의 소품

소품을 사용하여 한 구성 요소에서 다른 구성 요소로 정보를 보낼 수 있습니다. 아래 예에서는 두 개의 사용자 정의 구성 요소(학생 및 주제)가 생성되었습니다.

주제 구성 요소는 다음과 같습니다 -

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

구성 요소는 매개 변수 props를 사용합니다. Text 구성 요소 내에서 이름을 props.name으로 표시하는 데 사용됩니다. 학생 구성 요소에서 주제 구성 요소로 props를 전달하는 방법을 살펴보겠습니다.

학생 구성 요소는 다음과 같습니다 -

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

Student 구성 요소에서 Subject 구성 요소는 이름 소품과 함께 사용됩니다. 전달된 값은 수학, 물리학 및 화학입니다. Subject는 props라는 이름에 다른 값을 전달하여 재사용할 수 있습니다.

다음은 출력과 함께 Student 및 Subject 구성 요소를 사용한 작업 예입니다.

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;

출력