View: คืออะไร คุณสมบัติคอนเทนเนอร์และ React Native

View ใน React Native คืออะไร

View เป็นคอมโพเนนต์พื้นฐานของ React Native ที่ทำหน้าที่เป็นคอนเทนเนอร์สำหรับคอมโพเนนต์อื่นๆ รองรับการจัดสไตล์ผ่าน StyleSheet เลย์เอาต์ผ่าน Flexbox การจัดการสัมผัส แอนิเมชัน และการแปลงค่า View เป็นนามธรรมเหนือองค์ประกอบคอนเทนเนอร์ดั้งเดิม: UIView บน iOS และ android.view.View บน Android

ใน React Native ไม่สามารถใช้องค์ประกอบ HTML ได้ — แทนที่ เลย์เอาต์ทั้งหมดจะถูกสร้างจาก View แม้แต่ Text และ Image ก็มักจะถูกห่อใน View เพื่อจัดตำแหน่ง คอมโพเนนต์สามารถว่างเปล่า (เป็นเพียงคอนเทนเนอร์) หรือมีองค์ประกอบลูกจำนวนเท่าใดก็ได้ในระดับความลึกของการซ้อนใดๆ

View รองรับ การเรนเดอร์บนทั้งสองแพลตฟอร์มจากโค้ดเบส JavaScript เดียว คุณสมบัติ Flexbox ระยะขอบ พื้นหลัง เงา และเส้นขอบทำงานเหมือนกันบน iOS และ Android ความแตกต่างระหว่างแพลตฟอร์มมีน้อยมาก — ตัวอย่างเช่น เงาบน iOS ใช้ shadowColor/shadowOffset ในขณะที่ Android ใช้ elevation

ตาม React Native Layout Docs, 2024 View ได้รับการปรับให้เหมาะสมสำหรับอุปกรณ์มือถือ: มันไม่สร้างมุมมองดั้งเดิมพิเศษระหว่างการปรับ flatten และจัดการ การอัปเดตแบบเรียงซ้อนอย่างถูกต้องเมื่อสไตล์ของพ่อแม่เปลี่ยนแปลง

คุณสมบัติและ API ของคอมโพเนนต์ View

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

props สไตล์ของ View

View รองรับ คุณสมบัติ CSSมาตรฐานทั้งหมดสำหรับแพลตฟอร์มมือถือ คุณสมบัติหลักได้แก่: flexDirection, justifyContent, alignItems สำหรับการจัดตำแหน่ง; margin, padding สำหรับระยะห่าง; backgroundColor, borderRadius สำหรับลักษณะที่ปรากฏ; width, height, maxHeight สำหรับขนาด

เหตุการณ์สัมผัสและท่าทาง

View สามารถจัดการเหตุการณ์ สัมผัสผ่าน props onStartShouldSetResponder, onMoveShouldSetResponder และ onResponderGrant เหตุการณ์เหล่านี้ช่วยให้สามารถใช้งานท่าทางที่กำหนดเองได้โดยไม่ต้องใช้ไลบรารี สำหรับการแตะมาตรฐาน จะใช้ onTouchStart, onTouchEnd และ onPress (ผ่าน Pressable หรือ TouchableOpacity)

props เฉพาะแพลตฟอร์ม

บน iOS มี shadowColor, shadowOffset, shadowOpacity, shadowRadius สำหรับเงา บน Android คุณสมบัติเหล่านี้จะถูกมองข้าม — แทนที่จะใช้ elevation (เงาแบบการ์ด) callback onLayout จะถูกเรียกเมื่อขนาดของ View เปลี่ยนแปลง ซึ่งมีประโยชน์สำหรับเลย์เอาต์แบบปรับตัว

เลย์เอาต์ด้วย View และ Flexbox

Flexbox เป็นกลไกเลย์เอาต์เพียงอย่างเดียวใน React Native (ต่างจากเว็บที่สามารถใช้ Grid และ Float ได้) การจัดตำแหน่งองค์ประกอบทั้งหมดทำผ่านคุณสมบัติ Flexbox ของคอมโพเนนต์ View โดยค่าเริ่มต้น View มี flexDirection ตั้งค่าเป็น column ไม่ใช่ row อย่างบนเว็บ ซึ่งสอดคล้องกับการวางแนวแนวตั้งของหน้าจอมือถือ

คุณสมบัติ Flexbox หลักใน View

flexDirection กำหนดทิศทางของแกนหลัก: column (ค่าเริ่มต้น) หรือ row justifyContent ควบคุมการกระจายตามแนวแกนหลัก (flex-start, center, space-between) alignItems — ตามแนวแกนขวาง (stretch — ค่าเริ่มต้น) flex ระบุสัดส่วนของพื้นที่ว่างสำหรับองค์ประกอบลูก

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

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

ตัวอย่างแสดงโครงสร้างทั่วไป: View ด้านนอก — การ์ด, row ด้านใน — แถวที่มีรูปประจำตัวและบล็อกข้อความ, content — คอลัมน์ที่มี ชื่อและบทบาท โครงสร้าง View ที่ซ้อนกันนี้เป็นมาตรฐานสำหรับหน้าจอ React Native ใดๆ

ความแตกต่างระหว่าง View และ div ของ HTML

แม้ว่า View จะคล้ายกับ div ของ HTML ในเชิงแนวคิด แต่ก็มีความแตกต่างสำคัญที่ต้องเข้าใจเมื่อย้ายโค้ดจากเว็บไปยัง React Native ความแตกต่างเหล่านี้เกี่ยวข้องกับการเรนเดอร์ สไตล์ และพฤติกรรมค่าเริ่มต้น

ความแตกต่างที่สำคัญที่สุดคือ flexDirection: column โดยค่าเริ่มต้น ซึ่งหมายความว่าโดยไม่มีการกำหนดค่าที่ชัดเจน องค์ประกอบลูกจะถูกจัดเรียงในแนวตั้ง ไม่ใช่แนวนอน ความแตกต่างที่สอง: ความกว้างและความสูงของ View โดยค่าเริ่มต้นจะขยายเพื่อเติมเต็มพื้นที่ว่างทั้งหมดของพ่อแม่ (เทียบได้กับ width: 100% ใน CSS)

ตัวอย่างการใช้งานจริงกับ View

มาดูตัวอย่างจริงสองตัวอย่างของการใช้ View ในแอปพลิเคชัน React Native: การจัดกึ่งกลางเนื้อหาแบบเต็มหน้าจอและการสร้างกริดการ์ดแบบปรับขนาดได้ ทั้งสองรูปแบบปรากฏในทุกโปรเจกต์

ตัวอย่างที่ 1: หน้าจอตัวยึดที่มีการจัดกึ่งกลาง

ในการสร้างสถานะว่าง จะใช้ View ที่มี flex: 1 และการจัดกึ่งกลางบนทั้งสองแกน นี่เป็นรูปแบบมาตรฐานสำหรับหน้าจอโหลด สถานะข้อผิดพลาด และรายการว่าง

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

การรวมกันของ justifyContent: center และ alignItems: center ใน View ที่มี flex: 1 จะจัดกึ่งกลางเนื้อหาบนทั้งสองแกนแบบเต็มหน้าจอ นี่เป็นรูปแบบที่พบได้บ่อยที่สุดของการใช้ View ใน React Native

ตัวอย่างที่ 2: กริดการ์ดด้วย Flexbox

ในการแสดง สองคอลัมน์ของผลิตภัณฑ์หรือบทความ จะใช้ View ที่มี flexDirection: row, flexWrap: wrap และ View ลูกที่มีความกว้างคงที่ รูปแบบนี้แทนที่ CSS Grid ใน React Native

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

ในตัวอย่างนี้ View ด้านนอกที่มี flexWrap: wrap ทำหน้าที่เหมือนกับ CSS Grid การ์ดแต่ละใบใช้พื้นที่ 48% ของความกว้าง โดยเว้นช่องว่างระหว่างคอลัมน์ นี่เป็นรูปแบบทั่วไปสำหรับแคตตาล็อกและฟีดเนื้อหา