อุปกรณ์ประกอบฉากในภาษาพื้นเมืองตอบสนองคืออะไร?

อุปกรณ์ประกอบฉากคือคุณสมบัติที่ช่วยแก้ไของค์ประกอบปฏิกิริยา องค์ประกอบที่สร้างขึ้นสามารถใช้กับพารามิเตอร์ต่างๆ ได้โดยใช้แนวคิดอุปกรณ์ประกอบฉาก ด้วยอุปกรณ์ประกอบฉาก คุณสามารถส่งข้อมูลจากส่วนประกอบหนึ่งไปยังอีกส่วนประกอบหนึ่ง และในขณะเดียวกันก็นำส่วนประกอบกลับมาใช้ใหม่ได้ตามความต้องการของคุณ

คุณจะคุ้นเคยกับอุปกรณ์ประกอบฉากหากคุณคุ้นเคยกับ ReactJS เป็นอย่างดี แนวคิดเดียวกันจะตามมาใน React Native

เรามาดูตัวอย่างที่อธิบายว่าอุปกรณ์ประกอบฉากคืออะไร

ตัวอย่างที่ 1:อุปกรณ์ประกอบฉากภายใน React Native Built-in Components

พิจารณาองค์ประกอบภาพ −

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

สไตล์ และ แหล่งที่มา เป็นคุณสมบัติเช่นอุปกรณ์ประกอบฉากสำหรับองค์ประกอบภาพ พร็อพสไตล์ใช้เพื่อเพิ่มสไตล์ เช่น ความกว้าง ความสูง ฯลฯ และอุปกรณ์ต้นทางใช้เพื่อกำหนด 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>
);

ตัวอย่างด้านล่างแสดงการแสดงภาพอย่างง่ายโดยใช้อุปกรณ์ประกอบฉากในตัว -

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

ส่วนประกอบใช้อุปกรณ์ประกอบฉากพารามิเตอร์ ใช้ภายในองค์ประกอบ Text เพื่อแสดงชื่อเป็น props.name ให้เราดูวิธีการส่งอุปกรณ์ประกอบฉากไปยังองค์ประกอบเรื่องจากส่วนประกอบนักเรียน

องค์ประกอบของนักเรียนมีดังนี้ −

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

ในองค์ประกอบนักเรียน องค์ประกอบหัวเรื่องจะใช้กับอุปกรณ์ประกอบฉากชื่อ ค่าที่ส่งคือคณิตศาสตร์ ฟิสิกส์ และเคมี สามารถใช้ Subject ซ้ำได้โดยการส่งผ่านค่าต่างๆ ไปยังอุปกรณ์ประกอบฉากชื่อ

นี่คือตัวอย่างการทำงานกับองค์ประกอบ 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;

ผลลัพธ์