พัฒนา Mobile Application ด้วย React Native Expo เขียนครั้งเดียวใช้ได้ทั้ง Android และ iOS

ในบทความนี้จะพามาเรียนรู้ในเรื่องการพัฒนา Mobile Application โดย React Native หากใครยังไม่รู้ว่ามันคืออะไรให้อ่าน React Native คือ อะไร? ซึ่งวันนี้จะแนะนำ Expo ที่เป็นตัวช่วยในการพัฒนาให้ง่ายกว่าเดิมหลายเท่าเลย

React Native Expo คืออะไร

Expo เป็น framework และแพลตฟอร์มที่พัฒนาขึ้นจาก React Native เป็นตัวช่วยให้เราพัฒนาแอปฯ ได้รวดเร็ว และง่ายยิ่งขึ้นโดยอาศัยความรู้ในเรื่อง JavaScript หรือ TypeScript ก็ได้ ซึ่งสามารถพัฒนาได้ทั้ง Android และ iOS ในคราวเดียวกัน และความสามารถพิเศษอีกอย่างของ Expo คือให้เราสามารถ Run แอปฯ ของเราได้ผ่านมือถือจริง ได้โดยไม่ต้องต่อสาย USB เลย เพียงแค่ให้เครื่องคอมที่ใช้พัฒนาและมือถืออยู่ในวง Lan เดียวกัน พูดง่าย ๆ ว่าเราไม่ต้องกังวลในเรื่องการติดตั้งโปรแกรมอื่น ๆ เยอะแยะมากมายอีกต่อไป

เริ่มพัฒนาแอปฯ

ก่อนอื่นเราต้องติดตั้ง Expo cli ก่อน โดยใช้คำสั่ง

npm install --global expo-cli

จากนั้นมาสร้างแอปฯ ของเรากันเลย โดยใช้คำสั่ง

expo init myApp

ระบบจะถามว่าเราจะใช้ template แบบไหน ในกรณีนี้ผมจะใช้แบบ blank นะครับ ตามรูป

รอสักพัก ระบบจะแจ้งผลการดำเนินการตามภาพ ถือเป็นอันเรียบร้อย

จากนั้นเราก็สามารถ run ดูหน้าตาแอปของเราได้เลย โดยใช้คำสั่ง

cd myApp
yarn start

ระบบจะเปิด browser ขึ้นมาและแสดงรายละเอียดการทำงานต่าง ๆ แต่ที่เราจะสนใจในขั้นตอนนี้คือ QR Code ด้านล่างซ้าย

จากนั้นให้ดาวน์โหลดแอปฯ ใน Store ชื่อว่า Expo Go

• Android ดาวน์โหลด https://play.google.com/store/apps/details?id=host.exp.exponent
• iOS ดาวน์โหลด https://apps.apple.com/th/app/expo-go/id982107779

เมื่อดาวน์โหลดเรียบร้อยแล้ว ให้เปิดแอปฯ Expo Go มา สแกน QR Code ได้เลยแล้วจะเจอหน้าตาแอปฯ แรกของเราดังนี้

จากนั้นก็ตามที่ข้อความในแอปฯ แจ้งเลย เราสามารถเริ่มต้นเขียนโค้ดได้ที่ไฟล์ App.js ใน โฟลเดอร์ myApp เราเลยครับ

อ่านเพิ่มเติม

• https://docs.expo.dev/ 
• https://puwanai.com/react-native-mobile-apps-cross-platform.html