แอปหลายหน้าทำไงดี (Navigation) ซีรีย์ มาเล่น React Native กันเถอะ EP.2
สำหรับใน EP.2 จะมาพูดถึงการสร้าง Navigation แน่นอนว่าในแอปพลิเคชันของเราไม่มีแค่หน้าเดียวแน่นอน โดยในส่วนของบทความนี้จะใช้ React Navigation มาช่วยในการเชื่อมต่อหน้าแต่ละหน้าเข้าด้วยกันแต่ละและใช้ React Native Vector Icons มาช่วยในการใส่ไอคอนสวย ๆ ในแอปพลิเคชันเรา ซึ่งรายละเอียดการใช้งานอื่น ๆ เกี่ยวกับ React Navigation และการติดตั้ง React Native Vector Icons สามารถดูได้ใน Document เว็บหลักเลยครับผม ในบทความนี้ก็มีสอนการติดตั้ง React Native Vector Icons บางส่วนด้วยนะครับ
ก่อนการเริ่มเรามาดูกันก่อนว่าเว็บเราจะประกอบไปด้วยอะไรบาง ดังภาพด้านล่างจะแสดงให้เห็นถึงโครงสร้างของหน้าแอปพลิเคชันเราว่าประกอบไปด้วยหน้าไหนบ้าง ซึ่ง ผู้เขียนได้ออกแบบให้เมื่อเปิดแอปพลิเคชันจะแสดงหน้า Splash และเมื่อผ่านหน้า Splash ไปก็จะเข้าสู่หน้า Home ซึ่งจะอยู่ในกลุ่มของ Bottom Navigator โดยในกลุ่มของ Bottom Navigator จะประกอบไปด้วย 4 หน้าคือ Home Detail Profile และ Setting ซึ่งจะมีหน้าที่โยงออกจาก Bottom Navigator คือ About และ OK! Number1! ซึ่งโดยรวมทั้งหมดจะอยู่ใน Stack Navigator อันนี้คือแนว Concept ของ Navigator โดยคราว ๆ ครับ พยายามให้มองเป็นภาพเป็นกลุ่มแต่ถ้ายังไม่เห็นภาพ ถ้าลองเขียนโค้ดดูอาจจะเห็นมากกว่าเดิมครับ
มาเริ่มลงมือเขียนโค้ดกันเลยครับ อันดับแรกทำการเปิดโปรเจคของเราเลยครับผม ทำต่อจาก EP.1 ได้เลยครับ
หลังจากนั้นให้สร้างโฟร์เดอร์ตามรูปด้านล่างเลยครับเลยครับ เพื่อทำการเก็บไฟล์ต่าง ๆ โดยจะประกอบไปด้วย 3 โฟร์เดอร์ ซึ่งได้แก่ components routes และ screens ซึ่งในแต่ละโฟร์เดอร์จะมีหน้าที่ดังนี้ components ใช้เก็บไฟล์ต่าง ๆ ที่เกี่ยวกับองค์ประกอบของแอปพลิเคชันเรา เช่น Button ที่แน่นอนว่าเราอาจจะใช้เหมือนกันทั้งแอปพลิเคชันจึงจำเป็นต้องสร้างเป็น components แยก routes โฟร์เดอร์นี้จะเอาไว้เก็บไฟล์ที่เกี่ยวกับการ Navigate ต่าง ๆ Screens ตามชื่อเลยครับเอาไว้เก็บพวกหน้าในแอปพลิเคชันของเราครับ
หลังจากสร้างโฟร์เดอร์แล้วทำการติดตั้ง React Navigation เลยครับ พิมคำสั่งนี้
yarn add @react-navigation/nativeและตามด้วย
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-viewเมื่อเสร็จแล้วทำการสร้างไฟล์ในโฟร์เดอร์ routes ว่า Navigation.tsx เมื่อสร้างไฟล์แล้วพิมพ์ตามรูปตัวอย่างด้านล่างได้เลยครับผม
ในส่วนไฟล์ Navigation จะของค้างไว้ก่อนนะครับ ไปสร้างไฟล์ที่โฟร์เดอร์ screens ซึ่งในแอปพลิเคชันเราจะมีทั้งหมด 7 หน้า มาเริ่มสร้างกันเลยครับ
จากภาพด้านบนจะเห็นได้ว่าผมได้สร้างไฟล์ของหน้าทั้งหมดไว้แล้วซึ่งโค้ดก็เหมือนกันกับหน้า Home สำหรับโค้ดตัวอย่างตามลิงค์นี้เลยครับผม คลิ๊ก ต่อไปเราจะเอาหน้าทั้งหมดมาเชื่อมกัน ให้เปิดไฟล์ Navigation.tsx ก่อนอื่นติดตั้งในส่วน Stack Navigator กันก่อน
yarn add @react-navigation/stackหลังจากนั้น ขั้นแรกทำการ import หน้าทั้งหมดมาไว้ก่อน ต่อไปมาสร้าง Stack Navigator กัน ทำการ import มา @react-navigation/stack และพิมพ์ตามโค้ดด้านล่างได้เลย
จากโค้ดด้านบนจะเห็นได้ว่าเป็นโค้ดที่สร้างไว้สำหรับ Stack Navigator เพื่อให้หน้าเชื่อมโยงเข้าถึงกันได้ ต่อไปจะเป็นการสร้าง Bottom Tab Navigator นะครับ ทำการติดตั้ง ในส่วน Bottom Tab Navigator กันก่อน
yarn add @react-navigation/bottom-tabsหลังจากเสร็จแล้ว import ตัว @react-navigation/bottom-tabs เข้ามาเลยครับ ซึ่งสามารถเขียนตามโค้ดได้ดังนี้
ต่อไป ไปที่ไฟล์ App.tsx ทำการลบโค้ดเดิมและแทนที่ด้วยโค้ดตามนี้เลยครับ
เมื่อได้ทุกอย่างครบ มาทดสอบรันแอปพลิเคชันกันเลยครับ เนื้อหาตาม EP.1 เลยนะครับ แต่ React Native ไม่จำเป็นต้องใช้คำสั้ง npx react-native run-android ทุกครั้งนะครับใช้แค่ครั้งเดียวก็จะสามารถอัพเดทตอนแก้ไขได้แบบเรียลไทม์เลยครับ ยกเว้นแต่ว่าเราเข้าไปแก้ไฟล์ระกับของแต่ละ OS หลังจากรันเสร็จตัวอย่างก็จะได้ประมาณนี้ครับ
จากรูปด้านบนจะเห็นได้ว่าในแท็ป Navigation จะมีแค่ตัวหนังสือ ต่อไปเรามาเพิ่ม Icon ให้กับแท็บกัน ก่อนอื่นทำการติดตั้ง React Native Vector Icons พิมคำสั่งตามนี้เลย
yarn add react-native-vector-iconsและตามด้วยติดตั้ง package สำหรับ Typescript
yarn add @types/react-native-vector-iconsต่อไปเพิ่มโค้ดนี้ที่บรรทัดสุดท้ายของไฟล์ android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"และเพิ่มโค้ดนี้ที่ Navigation.tsx
หลังจากนั้นไปดูผลลัพธ์ได้เลย
หลังจากได้ไอคอนอันสวยงามแล้ว ผลลัพธ์ที่ได้จากการทำ Navigation เพื่อให้ดูง่าย ๆ และเราก็ได้ Navigation ของเราแล้ว เลยเอาหน้าแต่ละหน้าไปเปรียบเทียบกับ Chart ที่ออกแบบไว้ ดังภาพด้านล่าง
เป็นอันเสร็จแล้วสำหรับการทำ Navigation เพื่อให้สามารถสลับไปหน้าต่าง ๆ บนแอปเราได้ อันนี้เป็นลิงค์ซอร์ซโค้ดนะครับ https://github.com/teerapon19/react-native-navigation-example เอาไว้ศึกษาทำความเข้าใจเพิ่มเติมครับผม
สำหรับ EP หน้าจะเป็นการเรียก API (Application Programming Interface) โดยแน่นอนว่าปัจจุบันแอปพลิเคชันจะเกี่ยวข้องกับการเชื่อมต่ออินเตอร์เน็ตเป็นส่วนใหญ่ การที่เราสามารถเรียก API ก็ถือว่าเป็นพื้นฐานสำคัญในการทำเว็บและแอปพลิเคชันครับผม
