พัฒนา Mobile Application ด้วย React Native Expo เขียนครั้งเดียวใช้ได้ทั้ง Android และ iOS
วันที่: 15 เม.ย. 2565 17:12 น.
![พัฒนา Mobile Application ด้วย React Native Expo เขียนครั้งเดียวใช้ได้ทั้ง Android และ iOS](/images/20220415171148_63902.png)
ในบทความนี้จะพามาเรียนรู้ในเรื่องการพัฒนา 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 เราเลยครับ
อ่านเพิ่มเติม
เรื่องอื่น ๆ ที่เกี่ยวข้อง
![React Native คือ อะไร? มารู้จักเครื่องมือพัฒนา Mobile Apps แบบ Cross-Platform กัน](/images/og_20220327230011_14895.png)
React Native คือ อะไร? มารู้จักเครื่องมือพัฒนา Mobile Apps แบบ Cross-Platform กัน
เมื่อวันที่: 27 มี.ค. 2565 23:00 น.
![วิธีติดตั้งและใช้งาน react](/images/og_20220219212533_30673.png)
เมื่อวันที่: 19 ก.พ. 2565 21:25 น.
![สร้าง Line Login ให้กับเว็บไซต์ ด้วยภาษา PHP](/images/og_20220422230300_24360.png)
สร้าง Line Login ให้กับเว็บไซต์ ด้วยภาษา PHP
เมื่อวันที่: 22 เม.ย. 2565 22:55 น.
![เริ่มต้นสร้าง RESTful API ด้วย Node.js ร่วมกับ Express](/images/og_20220406225713_49714.png)
เริ่มต้นสร้าง RESTful API ด้วย Node.js ร่วมกับ Express
เมื่อวันที่: 6 เม.ย. 2565 22:57 น.
![พัฒนา Line bot ด้วยภาษา PHP อย่างง่าย ด้วยโค้ดไม่กี่บรรทัด (ep.2)](/images/og_20220614231501_86365.png)
พัฒนา Line bot ด้วยภาษา PHP อย่างง่าย ด้วยโค้ดไม่กี่บรรทัด (ep.2)
เมื่อวันที่: 14 มิ.ย. 2565 23:15 น.
![ทำการแจ้งเตือนสวย ๆ ด้วย SweetAlert2](/images/og_20220430170200_94765.png)
ทำการแจ้งเตือนสวย ๆ ด้วย SweetAlert2
เมื่อวันที่: 30 เม.ย. 2565 17:02 น.