วิธีติดตั้ง Expo CLI สำหรับพัฒนา Mobile App ด้วย React Native

Written by

jatuporn.ch

in

, , ,

สำหรับผู้พัฒนาที่ต้องการพัฒนา Mobile App แต่รู้สึกว่ายังไม่พร้อมศึกษา React Native แบบจริงจัง สามารถใช้งาน Expo Framework โดยสามารถใช้ได้ทั้งในการพัฒนา หรือ Build ขึ้น Store ได้เลยทั้ง iOS/Android ด้วยภาษา JavaScript/TypeScript

โดยวันนี้จะเริ่มด้วยแนะนำวิธีติดตั้ง Tools สำหรับพัฒนาชื่อ Expo CLI ครับ

  • Reference : https://docs.expo.io/versions/latest/
  • Installation Version
    • windows 10 version 1909 64 bit
    • npm 12.14.0 LTS
    • python 3.8
    • Expo SDK 36
  • ติดตั้ง Node Js (โหลดติดตั้งแบบ LTS)
    https://nodejs.org/en/
  • ถ้ามีแจ้งไฟล์ไม่ปลอดภัยกดข้ามไป
  • จะมีให้เลือกว่าจะลง Chocolatey หรือเปล่า เพื่อติดตั้ง Module เพิ่มเติม และแนะนำติดตั้ง Node-Gyp ซึ่งจะต้องติดตั้งเองภายหลัง
  • ติดตั้ง Python ก่อนติดตั้ง Node-Gyp ผ่าน Windows Store (หลังกด Get ไม่ต้อง Sign In ก็ได้)
  • เปิด windows cmd (Run as Administrator หรือไม่ก็เลือก Start->Node.js command prompt)
  • ติดตั้ง node-gyp
    npm install -g node-gyp
  • ติดตั้ง Expo CLI ด้วย npm
    npm install -g expo-cli
  • ทดสอบสร้างโปรเจ๊คใหม่ดังนี้
    • expo init
  • สั่งรัน Web สำหรับ Debug จะพบว่า Error
  • สำหรับ Expo SDK 36 ต้องแก้ \node_modules\metro-config\src\defaults\blacklist.js ดังนี้
    var sharedBlacklist = [
    /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
    /website\ /node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/
    ];

สามารถทดสอบเปิดได้ผ่านโปรแกรม Expo ใน Android/IOS หรือ Emulator Android หรือจะผ่าน USB Debug Android ก็ได้ครับ โดยได้ทั้ง QR-Code หรือ Exp URL Copy ไปแป๊ะในโปรแกรมได้ครับ (ต้องอยู่ในวง Network เดียวกันยกเว้นทดสอบโดยใช้ Tunnel)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts