คุณจัดการ image และ asset ใน React Native อย่างไร?

Question

Accepted Answer

แอป React Native แสดง **image** (local และ remote) และ bundle **asset** (font เป็นต้น) การเข้าใจวิธีโหลด image อย่างมีประสิทธิภาพ จัดการความละเอียดที่แตกต่างกัน และปรับแต่งประสิทธิภาพของ image สำคัญต่อ UX และประสิทธิภาพที่ดี ## การโหลด image ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` image แบบ local ใช้ `require` (bundle ไว้); image แบบ remote ใช้ `uri` **image ต้องมีขนาดที่ระบุชัดเจน** (width/height) — ต่างจากเว็บ มันไม่ปรับขนาดอัตโนมัติจากไฟล์ ## ความละเอียดและ resizeMode ```text → RESOLUTION: provide @2x and @3x variants (logo.png, logo@2x.png, logo@3x.png) → RN picks the right one per device density (crisp on all screens) → resizeMode: cover / contain / stretch / center → how the image fits its box ``` ## ประสิทธิภาพ: การปรับแต่ง image ```text ✓ Use APPROPRIATELY-SIZED images (don't load huge images into small views — wastes memory/bandwidth) ✓ FastImage (react-native-fast-image) → better remote image performance + CACHING (caches images so they don't re-download; smoother than the default Image for lists) ✓ Use the right FORMAT (WebP for smaller sizes); lazy-load; placeholders while loading ✓ Images are a common source of memory issues / jank in lists → optimize them ``` ## ทำไมจึงสำคัญ การเข้าใจวิธีจัดการ image และ asset มีคุณค่าเพราะ **แอปส่วนใหญ่แสดง image** และการทำเช่นนั้นอย่างมีประสิทธิภาพส่งผลต่อทั้ง UX และประสิทธิภาพ จึงเป็นความรู้เชิงปฏิบัติที่มีประโยชน์ การเข้าใจ **การโหลด image** — image แบบ local ผ่าน `require` (bundle ไว้ตอน build time) image แบบ remote ผ่าน `uri` และประเด็นสำคัญว่า **image ต้องมีขนาดที่ระบุชัดเจน** ใน React Native (ต่างจากเว็บ มันไม่ปรับขนาดอัตโนมัติ) — จำเป็นต่อการแสดง image ใด ๆ การเข้าใจ **การจัดการความละเอียด** (การให้ตัวแปร @2x/@3x เพื่อให้ React Native เลือกตัวที่ถูกต้องตาม density ของอุปกรณ์เพื่อ image ที่คมชัดทุกหน้าจอ) และ **resizeMode** (วิธีที่ image พอดีกับกล่อง) สำคัญต่อ image ที่ดูดีบน density หน้าจอที่หลากหลายของ Android และ iOS ที่สำคัญที่สุด การเข้าใจ **การปรับแต่งประสิทธิภาพ image** มีคุณค่าเพราะ **image เป็นแหล่งที่มาที่พบบ่อยของปัญหา memory และการกระตุก** (โดยเฉพาะใน list): การใช้ image ที่มีขนาดเหมาะสม (ไม่โหลด image ขนาดใหญ่เข้า view ขนาดเล็ก ซึ่งสิ้นเปลือง memory และ bandwidth) การใช้ **FastImage** เพื่อประสิทธิภาพ image แบบ remote ที่ดีขึ้นและ **caching** (เพื่อให้ image ไม่ต้อง download ซ้ำและ list เลื่อนได้ลื่นไหล — การปรับปรุงที่สำคัญเหนือ Image เริ่มต้นสำหรับ list ที่มี image จำนวนมาก) การใช้ format ที่มีประสิทธิภาพ (WebP) และการ lazy-load พร้อม placeholder การปรับแต่งเหล่านี้สำคัญเพราะแอปที่มี image จำนวนมาก (พบได้บ่อย — feed, gallery, profile) อาจประสบปัญหาประสิทธิภาพจริงหากจัดการ image ไม่ดี เนื่องจากแอปส่วนใหญ่แสดง image และการจัดการมันอย่างดี (การโหลดและขนาดที่ถูกต้อง ตัวแปรความละเอียด และโดยเฉพาะการปรับแต่งประสิทธิภาพด้วย caching และขนาดที่เหมาะสม) ส่งผลต่อทั้ง UX (image ที่คมชัดและโหลดได้ลื่นไหล) และประสิทธิภาพ (หลีกเลี่ยงปัญหา memory และการกระตุก) การเข้าใจ image และ asset ใน React Native จึงเป็นความรู้ที่มีคุณค่าและเกี่ยวข้องกับการปฏิบัติ — สำคัญต่อความต้องการที่พบบ่อยในการแสดง image ซึ่งการเข้าใจการโหลด ความละเอียด และโดยเฉพาะการปรับแต่งประสิทธิภาพ (caching, ขนาด) เป็นกุญแจสำคัญในการสร้างแอปที่มี image จำนวนมากให้ลื่นไหลและสมบูรณ์แบบ