Expo Router: วิธีซ้อน Navigation Drawer ใน Bottom Tabs
เรียนรู้วิธีผสาน Drawer เข้ากับ Bottom Tabs ใน Expo Router แบบไร้รอยต่อ ป้องกันปัญหาท่าทางปัดชนกันและสถานะรีเซ็ต พร้อมโครงสร้างโปรเจกต์
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ผสาน Drawer และ Bottom Tabs โดยไม่ให้เกิดปัญหาท่าทางปัดหน้าจอชนกัน
- จัดโครงสร้างไดเรกทอรีแอปด้วยระบบไฟล์ของ Expo Router ผ่านกลุ่มโฟลเดอร์
- กำหนดค่า swipeEdgeWidth เพื่อป้องกันความขัดแย้งของท่าทางสัมผัส
- จัดการซิงค์สถานะระหว่างหน้า Drawer และหน้าแท็บย่อยด้วย context scoping
การใช้งานแถบแท็บด้านล่างคู่กับเมนูด้านข้างแบบสไลด์ออกเป็นรูปแบบการนำทางที่พบบ่อยในแอปพลิเคชันข้ามแพลตฟอร์ม แต่หากรวมโครงสร้างเหล่านี้เข้าด้วยกันโดยขาดการวางแผน อาจส่งผลให้เกิดปัญหาประสิทธิภาพและการชนกันของท่าทางสัมผัสเมื่อทดสอบบนอุปกรณ์จริง
Expo Router ช่วยให้คุณสามารถแมปการนำทางเหล่านี้เข้ากับไดเรกทอรีระบบไฟล์ได้โดยตรง โค้ดของคุณจะเป็นระเบียบ ขณะที่คอมโพเนนต์การนำทางระดับเนทีฟยังคงทำงานเบื้องหลังได้อย่างมีประสิทธิภาพ ทีมงาน Expo ได้ขอให้เขียนบทความบอกเล่ากระบวนการนี้หลังจากที่มีการโพสต์เดโมบนทวิตเตอร์
การซ้อน Navigation หลายชั้นใน React Native มักเจออุปสรรคเรื่อง Gesture Conflict ระหว่างการปัดเปิดเมนูด้านข้างกับการปัดแกลเลอรีรูปภาพ แนวทางของ Expo Router ช่วยลดความซับซ้อนด้วยโครงสร้างโฟลเดอร์ แต่ยังคงต้องอาศัยการจัดการ State และ Gesture ให้อยู่ในขอบเขตที่เหมาะสมเพื่อประสบการณ์ใช้งานที่ลื่นไหล
ก่อนลงมือเขียนโค้ด ควรพิจารณาก่อนว่า UX ของแอปจำเป็นต้องใช้ลำดับชั้นการนำทางแบบคู่นี้จริงหรือไม่ โดยการใช้งานโครงสร้างระบบไฟล์ที่สะอาดจะช่วยให้ความซับซ้อนเชิงโครงสร้างจัดการได้ง่ายขึ้น พร้อมข้อควรระวังสำคัญสองประการดังนี้:
- การซิงค์สถานะ: การส่งข้อมูลผู้ใช้จากเส้นทาง Drawer ไปยังบริบทแท็บที่ซ้อนอยู่ต้องอาศัยการกำหนดขอบเขต context หรือ external store
- ความขัดแย้งของท่าทาง: การจำกัด swipeEdgeWidth ช่วยให้การปัดแถบด้านข้างไม่ไปรบกวนองค์ประกอบแนวนอนภายในแท็บ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เพื่อให้สถานะการนำทางเป็นหนึ่งเดียว ไดเรกทอรีโปรเจกต์ควรสะท้อนถึงแผนผังเลย์เอาต์ โดยใช้กลุ่มโฟลเดอร์ เช่น (drawer) และ (tabs) แทนไฟล์คอนฟิกูเรชันส่วนกลาง
- app/_layout.tsx: รากฐานของแอปจัดการวงจรชีวิตและ splash screen
- app/(drawer)/_layout.tsx: ห่อหุ้มการนำทางด้านนอก
- app/(drawer)/(tabs)/_layout.tsx: จัดการแท็บถาวรด้านล่าง
ข้อแนะนำในการพัฒนาคือให้สร้างขอบเขตโครงสร้างพื้นฐานก่อน ให้ (drawer)/_layout.tsx แสดงผลได้แล้วจึงซ้อนกลุ่ม (tabs) ไว้ข้างใน จากนั้นค่อยเพิ่มข้อจำกัดเรื่องท่าทางสัมผัสเป็นลำดับสุดท้าย เพื่อป้องกันไม่ให้ต้องดีบักปัญหาการปัดหน้าจอและเส้นทางพร้อมกัน
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น