Expo SDK #2 : การใช้งาน Expo SDK กับ Native Module

เมื่อเราลองพัฒนา Mobile App ด้วย Expo SDK นั้นอาจจะมีบางครั้งที่เรามีความจำเป็นต้องใช้งาน React-Native Library ของนักพัฒนาภายนอก ซึ่ง Expo SDK ไม่ได้ตระเตรียมไว้ วันนี้ผมจึงขอเสนอวิธีการใช้งาน Expo SDK กับคำสั่ง Detach เพื่อเรียกใช้งาน Native Module นั่นเองครับ

เริ่มกันเลยดีกว่า

จะขอต่อจากบทความที่แล้ว โดยสามารถนำ Project จากตัวอย่างที่แล้วมาใช้งานต่อด้วย หรือ หากใครยังไม่มีสามารถสร้างผ่าน XDE -> New Project

1.) หากยังไม่มี Command exp ก็สามารถติดตั้งเลยด้วย

npm install -g exp

2.) หากยังไม่ได้สมัครสมาชิกให้เรียกคำสั่ง

exp register //เพื่อสมัครสมาชิก หรือ สมัครผ่าน XDE
exp login // เพื่อ Login เข้าใช้งาน

3.) แก้ไขไฟล์ exp.json (Config file ของ Expo SDK)

{
   "name": "my-new-project",
   "description": "No description",
   "slug": "my-new-project",
   "privacy": "public",
   "sdkVersion": "16.0.0",
   "version": "1.0.0",
   "orientation": "portrait",
   "primaryColor": "#cccccc",
   "icon": "./assets/icons/app-icon.png",
   "notification": {
      "icon": "./assets/icons/notification-icon.png",
      "color": "#000000"
   },
   "loading": {
      "icon": "./assets/icons/loading-icon.png",
      "hideExponentText": false
   },
   "packagerOpts": {
      "assetExts": ["ttf"]
   },
   "ios": {
      "supportsTablet": true,
      "bundleIdentifier" : "com.exp.training" 
      // เพิ่มด้านบนบรรทัดนี้สามารถตั้งชื่อได้ตามใจในรูปแบบ Reverse DNS
   },
   "android" : {
      "package" : "com.exp.training"
   }
   // เพิ่ม android key เหล่านี้ สามารถตั้งชื่อได้ตามใจในรูปแบบ Reverse DNS
}

4.) รันคำสั่ง

exp detach

ระบบจะทำการ Download iOS & Android project

หากขาดส่วนที่เพิ่มขึ้นใน Config file จะไม่สามารถใช้คำสั่ง exp detach ได้

5.1) ทำการ Run iOS native project

ให้ทำการเปิด Xcode Project

Path: {Root of Project}/ios/{yourprojectname}.xcproj

ทำการ Run project ขึ้นมา เมื่อ Success ระบบจะทำการ Install App ของเราลงใน Simulator

ข้อควรรู้

1. เมื่อใช้คำสั่ง exp detach เรียบร้อยแล้ว หากต้องการพัฒนา iOS App จำเป็นต้องใช้ OSX เท่านั้น เนื่องจากต้องการใช้งาน Xcode ในการคอมไพล์
2. หากไม่มี App ใน Simulator จะไม่สามารถ Run simulator ผ่าน XDE ได้

5.2) ทำการ Run Android native project

5.2.1) ให้ทำการเปิด Android Project ผ่าน Android Studio จาก Path ด้านล่าง

Path: {Root of Project}/android/

5.2.2) เปิดไฟล์ *.gradle ขึ้นมาและทำการ Sync

5.2.3) เปิด Genymotion และเลือกเปิด Emulator

5.2.4) ทำการ Build and run

ข้อควรรู้

1. หากขึ้น Dialog ให้อัพเดท อัพเดทให้เรียบร้อยจากนั้น Sync gradle file จน สามารถ Run ได้สำเร็จครับ

6.) Enjoy with 3rd-party libray

ถึงตอนนี้เราสามารถเรียกใช้ 3rd-library ร่วมกับความสามารถของ ExpoKit ได้แล้วครับ