Text: มันคืออะไร การแสดงข้อความและ React Native

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

Text เป็นคอมโพเนนต์ React Native สำหรับแสดงเนื้อหาข้อความ ต่างจากการพัฒนาเว็บที่มีแท็กเชิงความหมายมากมายสำหรับข้อความ ใน React Native องค์ประกอบข้อความทั้งหมดถูกสร้างขึ้นผ่าน Text คอมโพเนนต์สามารถแสดงทั้งข้อความธรรมดาและโครงสร้างที่ซับซ้อนด้วย Text ที่ซ้อนกันและส่วนที่จัดสไตล์

Text จัดการการตัดบรรทัดโดยอัตโนมัติ จัดการตระกูลฟอนต์ ขนาด สี และการจัดตำแหน่ง คอมโพเนนต์รองรับเหตุการณ์สัมผัส (onPress) ทำให้สามารถสร้างลิงก์ที่คลิกได้โดยไม่ต้องใช้ตัวห่อเพิ่มเติม ข้อจำกัดสำคัญ: Text ไม่สามารถซ้อนโดยตรงภายใน View — ได้เฉพาะภายในคอมโพเนนต์ Text อื่นหรือเป็นลูกโดยตรง

ตาม React Native Nested Text, 2024 คอมโพเนนต์ Text ที่ซ้อนกันสืบทอดสไตล์จากหลัก ซึ่งช่วยให้สามารถกำหนดสไตล์พื้นฐานในระดับบนสุดและแทนที่คุณสมบัติแต่ละรายการสำหรับส่วนเฉพาะ — คล้ายกับวิธีที่ span ทำงานกับ CSS บนเว็บ

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

คอมโพเนนต์ Text มีชุด props สำหรับควบคุมการแสดงผล พฤติกรรม และการเข้าถึง หมวดหมู่หลัก: props สไตล์ (ฟอนต์ ขนาด สี การจัดตำแหน่ง), props การแสดงผล (numberOfLines, lineBreakMode) และ props เชิงโต้ตอบ (onPress, onLongPress)

Props การแสดงข้อความ

numberOfLines จำกัดจำนวนบรรทัดที่แสดง เพิ่มจุดไข่ปลาที่ท้าย ellipsizeMode ควบคุมตำแหน่งจุดไข่ปลา (head, middle, tail, clip) adjustsFontSizeToFit ลดขนาดฟอนต์โดยอัตโนมัติเพื่อให้ข้อความพอดีภายในขอบเขตที่กำหนด lineBreakMode กำหนดวิธีตัดข้อความที่เกิน numberOfLines

Props เชิงโต้ตอบ

Text รองรับ onPress และ onLongPress สำหรับจัดการการสัมผัส ซึ่งช่วยให้สร้างลิงก์ข้อความโดยไม่ต้องใช้ TouchableOpacity onTextLayout ส่งคืนข้อมูลเกี่ยวกับเค้าโครงข้อความหลังการเรนเดอร์ — มีประโยชน์สำหรับแอนิเมชันและการวางตำแหน่ง

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

บน iOS มี disabled (ปิดใช้งานข้อความ), selectable (เปิดใช้งานการเลือก), dataDetectorTypes (การตรวจจับลิงก์ โทรศัพท์ ที่อยู่โดยอัตโนมัติ) บน Android มี selectable (ผ่าน textSelectable) และ includeFontPadding (ลบระยะห่างส่วนเกิน)

ความแตกต่างระหว่าง Text กับองค์ประกอบ p และ span ใน HTML

แม้ว่า Text จะมองเห็นคล้ายกับแท็ก HTML p และ span แต่ความแตกต่างทางสถาปัตยกรรมมีนัยสำคัญ React Native ไม่มีโมเดล DOM ที่มีองค์ประกอบข้อความเชิงความหมาย — โหนดข้อความทั้งหมดถูกจัดการผ่านคอมโพเนนต์ Text เดียวที่มี props ต่างกัน

ความแตกต่างหลักคือการสืบทอดสไตล์ผ่านการซ้อนกันของ Text ถ้า Text ภายนอกมี fontSize: 18 และ color: blue คอมโพเนนต์ Text ที่ซ้อนกันทั้งหมดจะสืบทอดสไตล์เหล่านี้ สามารถแทนที่ props ใดก็ได้ใน Text ภายในโดยกำหนดค่าเฉพาะ ซึ่งประหยัดโค้ดและทำให้โครงสร้างสะอาดขึ้น

การจัดสไตล์ข้อความและฟอนต์

Text รองรับคุณสมบัติ CSS ส่วนใหญ่สำหรับการพิมพ์: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform ใน React Native ฟอนต์ถูกเชื่อมต่อที่ระดับแพลตฟอร์ม ไม่ใช่ผ่าน @font-face

การใช้ฟอนต์ที่กำหนดเอง

ในการใช้ฟอนต์ที่กำหนดเอง ต้องเพิ่มลงในโฟลเดอร์ assets/fonts และระบุใน react-native.config.js หลังจากสร้างแอปพลิเคชันใหม่ ฟอนต์จะพร้อมใช้งานผ่าน fontFamily React Native ไม่รองรับฟอนต์เว็บ (Google Fonts) โดยตรง — ต้องดาวน์โหลดไฟล์ .ttf หรือ .otf

การสืบทอดสไตล์และการลดหลั่น

กลไกการสืบทอดใน Text แตกต่างจาก CSS สไตล์จะถูกส่งจาก Text ไปยัง Text ที่ซ้อนกันเท่านั้น แต่ไม่ใช่จาก View ไปยัง Text ในการกำหนดฟอนต์สำหรับทั้งแอปพลิเคชัน ให้ใช้ defaultProps ของคอมโพเนนต์ Text หรือคอมโพเนนต์ตัวห่อที่กำหนดเอง

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

ในตัวอย่างนี้ Text ภายนอกกำหนด fontSize: 18 และ color: #333 Text ภายในสืบทอด fontSize (18) แต่แทนที่ fontWeight เป็น bold และ color เป็น #007AFF Text ภายนอกสืบทอดเฉพาะสไตล์ของตัวเองเท่านั้น นี่คือการเปรียบเทียบที่ตรงกับวิธีที่ span ซ้อนกันทำงานใน HTML

ตัวอย่างเชิงปฏิบัติกับ Text

มาดูกรณีการใช้งานทั่วไปสองกรณีของ Text ใน React Native: การจัดรูปแบบข้อความด้วยการซ้อนกันและการสร้างคอมโพเนนต์ที่คลิกได้พร้อมการจำกัดบรรทัด

ตัวอย่างที่ 1: การ์ดข่าวพร้อมการจัดรูปแบบ

ในตัวอย่างนี้ Text ใช้เพื่อแสดงข้อความหลายบรรทัดพร้อมองค์ประกอบที่เน้น: หัวเรื่อง วันที่ และเนื้อหาพร้อมลิงก์

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

โครงสร้างนี้มีคอมโพเนนต์ Text อิสระสามตัว (หัวเรื่อง วันที่ เนื้อหา) แต่ละตัวมีสไตล์ของตนเอง ภายใน Text เนื้อหา มี Text อีกตัวที่มี onPress ซ้อนอยู่สำหรับลิงก์ รูปแบบนี้ใช้สำหรับฟีดข่าว บล็อก และความคิดเห็น

ตัวอย่างที่ 2: ข้อความพร้อมการจำกัดบรรทัด

สำหรับการแสดงตัวอย่างข้อความด้วยจุดไข่ปลา จะใช้ numberOfLines ซึ่งเป็นรูปแบบมาตรฐานสำหรับการ์ดผลิตภัณฑ์และรายการบทความ

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

คุณสมบัติ numberOfLines = 2 จำกัดข้อความไว้ที่สองบรรทัด หากข้อความยาวกว่า React Native จะเพิ่มจุดไข่ปลาที่ท้ายบรรทัดที่สองโดยอัตโนมัติ พารามิเตอร์ ellipsizeMode: 'tail' ระบุว่าจุดไข่ปลาควรอยู่ที่ท้าย (head, middle และ clip ก็พร้อมใช้งาน)