สร้าง Tabbed Carousel ใน React Native

เพื่อให้เข้าใจว่าฉันกำลังพยายามสร้างอะไร อันดับแรก มาดูการสาธิต:

ดังที่คุณเห็นจาก gif เรามีสองส่วนในการสร้างองค์ประกอบนี้:

• แท็บ (ซึ่งคุณสามารถดูได้ที่ด้านบน)
• ม้าหมุน

สำหรับแท็บด้านบน ฉันแค่ใช้ FlatList แนวนอน และสำหรับ carousel ฉันใช้ แพ็คเกจ react-native-snap-carouse l ให้เราดูว่าฉันจะจัดการกับสิ่งนี้ได้อย่างไร

ด้วย init นี้ เราจึงได้แท็บและภาพหมุนโดยไม่ต้องซิงค์

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

ฉันกำลังวางข้อมูลโค้ดที่ทำงานนี้

เอาล่ะ จนถึงตอนนี้ เราได้เห็นวิธีเปลี่ยนแท็บแล้วเมื่อเราเลื่อนดูรายการของเราในภาพหมุน ตอนนี้ให้เราดูว่าเราจะเลื่อนไปยังรายการที่ถูกต้องได้อย่างไรเมื่อผู้ใช้กดบนแท็บ

แค่นั้นแหละ! เราจำเป็นต้องติดตามแท็บที่ใช้งานอยู่และซิงค์แท็บและภาพหมุนเข้าด้วยกัน