คัมภีร์การเริ่มต้น React Native ฉบับ 20scoopsCNX 2021 (Part 2)
จากความเเดิมใน Part 1 เราได้พูดถึงการตั้งค่าต่าง ๆ และการแบ่ง Components เพื่อให้สามารถทำความเข้าใจได้ง่ายขึ้นรวมถึงการทำ Theme และ Style ไปแล้วสำหรับใน Part 2 สุดท้ายแล้วเราจะมาทำให้ Application สมบูรณ์มากยิ่งขึ้นโดยยึดเครื่องมือตามที่บริษัท 20scoops CNX ของเราได้ใช้ทำงานจริงกับลูกค้าในยุโรป
หากใครจะไม่ได้อ่านใน Part 1 สามารถเข้าไป Catch-up ได้ตาม Link ด้านล่างนี้ได้เลย 👇
Phase 6: Making List with Recyclelistview
ในหัวข้อนี้เราจะมาทำให้ข้อมูลที่เราต้องการนำมาแสดงให้อยู่ในรูปแบบของ List View ซึ่งวิธีการทำนั้นที่ทำกันทั่วไปจะมี 3 แบบด้วยกันคือ
- Create Components by Looping + ScrollView
- FlatList
- Recyclelistview
ซึ่งตรงจุดนี้อยากให้เรามาทำความเข้าใจของการทำ List View ว่ามีกี่แบบ และแต่ละแบบนั่นมีความแตกต่างกันอย่างไร ไปดูกันเลย 😎
และตามที่กล่าวไว้ในช่วงต้นของบทความว่าในเราจะไปลองใช้ Recyclelistview กดูกันเพราะจากข้อมูลที่ได้นำมาเปรียบเทียบกันแล้วมีข้อได้เปรียบอยู่พอสมควรสำหรับการจัดการในส่วนของ Memory ที่ใช้สำหรับการ Render ของแต่ละ Item โดยเริ่มจากการ Install package เหมือนเดิมเลย น่าเบื่อจัง 😂
npm install --save recyclerlistviewแล้วที่นี้เราก็เอาไปใช้ใน HomeScreen.tsx แบบนี้ได้เลย
แล้วเราก็จะได้ผลลัพธ์แบบนี้ครับ
Phase 7: Using SVG as an icon
ต่อไปก็จะเป็นการใช้ icons ใน App ซึ่งผมจะใช้ SVG เพราะมันเบากว่า แทนที่จะต้องใส่ png, png@2 และ png@3 ตาม Dimension ของ iOS และ Android เราก็ใส่แค่ File เดียวไปเลยน่าจะเข้าท่ากว่า แต่ว่าถ้าเป็นรูปภาพที่มีความซับซ้อนก็แนะนำให้ใช้ .png ดีกว่าครับ เพราะ SVG ยังไม่ตอบโจทย์สำหรับภายที่มีรายละเอียดเยอะ ๆ
ซึ่งการเอา SVG มาใช้เราก็มีตัวช่วยคือ react-native-svg เริ่มต้นจากการ Install package
npm install react-native-svgและเพื่อให้ง่ายขึ้นสำหรับกับการใช้ Components ทั่วไปเราจำเป็นที่ต้องลง Package เสริมด้วย
npm install -D react-native-svg-transformerแล้วก็ Update metro.config.js ซึ่งเจ้าไฟล์นี้จะติดมากับสร้าง Project ตอนแรกเลยก็ให้ทำการ Update ตามด้านล่างนี้เลย
เท่านี้ก็เป็นอันเสร็จเรื่องการ Setup และต่อไปเราก็จะมาลองใช้ SVG กัน สิ่งแรกที่ขาดไม่ได้คือ right-arrow.svg ไว้ที่ Folder ชื่อ icons
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 7.328v-3.328l8 8-8 8v-3.328l-16-4.672z" fill="white" stroke="#d62e2e50" stroke-width="4"/></svg>แล้วเราก็จะเอาไปใส่ในแต่ละ Row เพื่อเป็น Icon บ่งบอกถึงการไปหน้า Detail ของแต่ละตัวละคร เราจึงต้อง Update HeroCard.tsx ดังนี้
และผลลัพธ์ที่ได้ก็จะประมาณนี้ครับ
พร้อมกับ Reaction เวลากดที่ Icon เพื่อให้รู้ว่ามีการ Interact เกิดขึ้น และเมื่อเราได้ผลลัพธ์ตามที่ต้องการแล้ว เราก็มาเช็ค tsc error กันครับ และจะพบปัญหาที่การ Import SVG เราสามารถ Fix ด้วยการสร้าง declarations.d.ts ไว้ที่ src ดังนี้
ทีนี้ Typescript ก็จะรู้ละว่าพวกที่ลงท้าย .svg คืออะไร สามารถนำเทคนิคนี้ไปใช้กับไฟล์ Assets อื่น ๆ ได้ เช่น .png หรือ .mp4
Phase 8: Let’s go to next screen
เมื่อหน้าแรกเสร็จที่นี้เราก็จะมาดูเรื่องการ Routing ไปยังหน้าอื่นๆ กันครับ โดยเริ่มจากที่เรานั้นจะสร้างหน้า Detail เปล่า ๆ ไว้ก่อน โดยผมจะตั้งชื่อว่า DetailScreen.tsx ไว้ที่โฟลเดอร์ screens แบบนี้ 🤗
ต่อไปก็ถึงเวลาที่จะไปเพิ่มลงใน Stack ของเรา แต่ว่าในความคิดผมนั้นเราควรที่จะ Refactor ชื่อของแต่ละ Screen เพราะมันไม่ได้ใช้แต่ใน MyStack.tsx แล้ว แต่ยังต้องใช้กับทุก Screen ที่เราจะ Routing ไป
ซึ่งจะแยกชื่อของ Screen ทั้งหมดไว้ที่ navigationName.ts ในโฟลเดอร์ navigation
แล้วก็กลับมาอัพเดทในไฟล์ที่ชื่อว่า MyStack.tsx ให้เป็นแบบนี้
และเมื่อเตรียม Stack เรียบร้อยแล้ว เราก็จะไป Update HeroCard.tsx ให้ลองรับ Function ที่จะทำงานเมื่อกด Icon กัน
สุดท้ายแล้วเราก็จะ Update HomeScreen.tsx ให้พาไปยังหน้า Detail เมื่อกด Icon ของแต่ละ Row เพื่อทดสอบสำหรับการเปลี่ยนหน้า
แล้วเมื่อเราลองกดที่ Icon ดูก็จะได้หน้าตาประมาณนี้ครับ Tada 🎉
พร้อมกับความสามารถที่จะกดย้อนกลับไปได้ด้วยเช่นกัน แล้วก็เหมือนทุกครั้งครับ เมื่อผลลัพธ์เป็นตามหวังแล้ว เราก็ต้องกลับมาดู tsc error กันสักหน่อย และครั้งนี้เราจะเห็นว่ามัน tsc error ตัว navigate ที่เราดึงมาใช้ จาก Props ของ HomeScreen
เราก็จะ Fix โดยบอก Props ของ HomeScreen และ บอกว่า navigate คืออะไรโดย เริ่มจากสร้าง rootStackParams.ts ไว้ที่ navigation เพื่อบอกว่าแต่ละหน้ารับ Parameters อะไรเพิ่มบ้าง ซึ่งตอนนี้เราแค่ส่งไปหน้าอื่นเฉย ๆ ก็เลยใส่แบบนี้ครับ
แล้วก็ Update HomeScreen.tsx ดังนี้ครับ
ทีนี้ tsc error ก็จะหายไปแล้วครับ ง่ายเนาะ สิ่งสำคัญเลยที่ผมย้ำทุกรอบก็คือการกลับมาแก้ไข Error จากการ Complie 🙌
Phase 9: Managing app ‘s state with Redux Toolkit
เรื่องต่อไปก็จะเป็นการที่จะทำให้ App ของเราสามารถแสดงผลต่างกันแม้จะเป็นหน้าเดียวกัน นั่นก็คือ State ครับ
แต่ด้วย App ของเราในบทความนี้ เป็นการปรับ State จาก Screen ข้ามไปอีก Screen เราจึงต้องใช้ตัวช่วยเรื่อง State Management อย่าง Redux เข้ามาช่วย หรือใครจะใช้ Context หรือ Event Bus ก็ไม่ว่ากันนะ และด้วยสมัยนี้มี Redux Toolkit เข้ามาช่วยให้ใช้งานง่ายเข้าไปอีก
ซึ่งในบทความนี้ก็หมายถึงเมื่อกด Icon ของ Row ไหนจาก HomeScreen ผลที่แสดงในหน้า DetailScreen ก็เปลี่ยนไปตาม Row ที่กดครับโดยเริ่มจาก Installll 😆
npm install @reduxjs/toolkit react-reduxซึ่งการแบ่ง Folder นั้น ผมชอบที่จะแยกเป็น Folder ชื่อ Redux แล้วข้างในก็จะมี 2 Folders ย่อยประมาณนี้ครับ
- reducers: สำหรับการเก็บพวกที่ ส่งค่าไป Store ไว้ หรือ Action นั่นเอง
- selectors: สำหรับการทำให้ Get ค่าจาก Store ง่าย ๆ ครับ
และเมื่อลงเสร็จแล้ว เราก็เริ่มมาเตรียมการเก็บ Current Hero กันครับ โดยเราจะสร้าง heroSlice.ts ไว้ที่ reducers แบบนี้ครับ
แล้วเราก็จะสร้าง store.ts ใน Redux เพื่อเป็นที่รวบรวม reducers ทั้งหมดดังนี้
จากนั้นเราก็จะ Update App.tsx เพื่อนำ redux มาใช้กับ App เราแบบนี้
ต่อไปเราก็จะลองใช้งานกันนะครับ โดยเราจะใส่ไว้ใน Function ที่เรียกเวลากดแต่ละ Row ที่ HomeScreen.tsx ครับ ก็จะประมาณนี้
และเราก็จะมาดูกันว่ามันใช้ได้ผลไหม โดยผมจะใช้ React Native Debugger ที่ผมกล่าวไว้ตอนสอน Debugging ครั้งแรก และหน้าตาก็จะประมาณนี้ครับ
และ State -> hero -> currentHero ก็จะเปลี่ยนไปตาม Row ที่กดครับ ต่อไปก็จะเป็นการดึง State ดังกล่าวมาใช้ในหน้า Detail โดยเริ่มจากสร้าง heroSelector.ts ไว้ที่ selectors แบบนี้นะครับ
แล้วก็ Update DetailScreen.tsx ให้แสดงผลตาม currentHero ดูครับ
ผลลัพธ์เราก็จะได้หน้าตาประมาณนี้ 👍
ซึ่งผลลัพธ์ก็จะเปลี่ยนทุกครั้งที่กด Row อื่น และเช่นเคยครับ เมื่อได้ผลตามที่ต้องการ เราก็จะมาดู tsc error กัน และครั้งนี้ก็เกิดที่ selectors ซึ่งเราก็สามารถ Fix ได้โดยเข้าไป Update store.ts ให้เป็นแบบนี้
และก็ที่ heroSelector.ts ดังนี้
เท่านี้ tsc error ก็หายหมดแล้วครับ
Phase 10: Get specific info from GraphQL
เราก็มาถึงเรื่องสุดท้ายของบทความนี้แล้วนะครับ ก็คือการเรียก GraphQL ที่ต้องใส่ Parameters เข้าไปครับ โดยเราจะเอา Current Hero ไป Get ข้อมูลมาแสดงผลในหน้า Detail ดูครับ
โดยเราจะ Update DetailScreen ดังนี้ครับ
แล้วก็มาดูผลลัพธ์กันครับ ก็จะได้ดังนี้
เท่านี้ก็เป็นการเสร็จเรียบร้อยสำหรับบทความนี้ครับ ส่วนเพื่อนจะลองไปตกแต่งหน้าตาของ Detail เล่น ๆ ก็ได้ครับ ส่วนพวกข้อมูลก็ดูได้ที่ Query ของ GraphQL เลยครับ สามารถเข้าไปดูใน Repository ด้านล่างนี้ได้เลย
Conclusion
ทั้งหมดนี้ก็เป็นเพียง Stack ในมุมของบริษัท 20scoops CNX ที่เราใช้อยู่นั่นไม่ได้แปลว่ามันจะเหมาะสมกับทุกคนนะครับ ซึ่งเราก็อยากจะนำมาแชร์ให้กับทุก ๆ คน เผื่อมันจะเป็นประโยชน์หรือสามรถนำไปต่อยอดกันได้ ในส่วนตัวผมแล้วผมจะแน่นไปที่การ Debugging เพื่อในส่วนนี้สำคัญมาก ๆ ในการพัฒนาซึ่งเจ้า Redux ToolKit มันและการที่เราหันมาใช้ Style Component ก็ทำให้รู้สึกว่า Code ของเราดู Clean ขึ้นเพราะฉะนั้นอย่ามั่วแต่ลังเลหันมาใช้กันเถอะ
ถ้าหากผิดพลาดตรงไหน หรือมีคำแนะนำก็ Comment ไว้ได้นะครับ ขอบคุณครับ ☺️
