VScode Workshop 3 : Example การเปลี่ยนหน้าจอ

เปลี่ยนหน้าจอด้วย React Navigation ซึ่งภายใน navigation ออบเจ็กต์จะมีเมธอดต่างๆ ที่ใช้เปลี่ยนหน้าจอ เช่น navigation(routeName) และ goBack()

1. ติดตั้ง React Navigation 7.x ทำงานร่วมกับ Expo

1.1 ไปที่เว็บไซต์ http://reactnavigation.org ซึ่งปัจจุบันเป็นเวอร์ชัน 7.x จากนั้นคลิกที่เมนู Docs เพื่อดูเอกสารประกอบการใช้งาน (เอาไว้ดูฟอร์แมตและก๊อปโค๊ดค่ะ 555)


1.2 เปิดหน้าต่าง Terminal (สำหรับ Mac) Command Promtp (สำหรับ Windows) สร้างโปรเจคใหม่ (วิธีสร้างจาก workshop1 ก่อนหน้านี้ ข้อที่ 4.1) ชื่อ exapp1- ตามด้วยชื่อคุณภาษาอังกฤษ (ตัวอย่าง exapp1-waraporn)

1.3 เข้าไปยังโปรเจคที่สร้าง (จาก workshop1 ก่อนหน้านี้ ข้อที่ 3.3) แล้วพิมพ์คำสั่ง npm install @react-navigation/native แล้วกด Enter


1.4 จากนั้นพิมพ์คำสั่ง npx expo install react-native-screens react-native-safe-area-context แล้วกด Enter (ติดตั้งการใช้งานร่วมกับ Expo)


1.5 ติดตั้ง Navigation Stack ด้วยคำสั่ง npm install @react-navigation/native-stack แล้วกด Enter


1.6 ติดตั้ง แพ็กเกจเพิ่มเติม ด้วยคำสั่ง npx expo install react-native-gesture-handler แล้วกด Enter



2. ออบเจ็กต์ที่ใช้เปลี่ยนหน้าจอ เช่น avigation(routeName) และ goBack()

เราจะสร้างหน้าจอ 2 จอ ชื่อ HomePage และ ProfilePage เมื่อแตะปุ่มจะสามารถเปลี่ยนจากหน้า HomePage เป็น ProfilePage สลับกันไปมาได้ โดยทำได้ดังนี้


2.1 เปิดไฟล์ App.js ขึ้นมาแล้วแก้โค๊ดดังนี้


2.2 จะเรียกใช้ไฟล์หน้าจอ HomePage และ ProfilePage (จะสร้างไฟล์หลังจากแก้ไข App.js เสร็จ) พร้อมประกาศตัวแปร Stack สำหรับเก็บออบเจ็ตที่รีเทิร์นมาจากฟังก์ชัน createStackNavigator


2.3 กำหนดคอมโพเนนต์ NavigationContainer Stack.Navigator Stack.Screen


2.4 สร้างโฟลเดอร์ชื่อ screens และสร้างไฟล์ชื่อ HomePage.js


2.5 เปิดไฟล์ HomePage.js ขึ้นมาแล้วแก้โค๊ดดังนี้


2.6 ประกาศตัวแปร navigation สำหรับเก็บค่าพร๊อพ Navagation ที่ส่งเข้ามาใน HomePage คอมโพเนนต์ และสร้างปุ่ม เรียกเมธอด navigate() ผ่านชื่อรูท Profile



2.7 ทำการ save as ไฟล์ HomePage.js แล้วตั้งชื่อไฟล์ ProfilePage นามสกุล js (JavaScript)


2.8 เปิดไฟล์ ProfilePage.js ขึ้นมาแล้วแก้โค๊ด



2.9 ประกาศตัวแปร navigation สำหรับเก็บค่าพร๊อพ Navagation เรียกเมธอด goBack() เพื่อย้อนไปหน้าก่อน



2.10 ใช้คำสั่ง npm start หากเชื่อมต่อกันได้จะแสดงหน้าจอดังรูป


3. อัดคลิปหน้าจอมือถือ ตามตัวอย่างคลิปนี้ ตั้งชื่อเป็น VScodeWorkshop3 และส่งคลิปนี้บนไดรฟ์