imkopkap

ติดตั้ง React-Native สร้างแอพ Android (windows)

ใช้เวลา 12 นาที 21/02/2016

ในสมัยช่วงนี้การพัฒนา Application สามารถทำได้หลายแบบ ทั้งเขียนแบบ Native (Java, Objective-c เป็นต้น) และแบบ Hybrid (Ionicframework, Framework7) จะเห็นได้ว่าเราสามารถเลือกใช้ภาษาใดภาษาหนึ่งเขียน Application ได้ และในบทความนี้จะพูดถึงวิธีการสร้าง App android ด้วย React-Native

 

React native คือ javascript framework ที่สามารถสร้าง App ได้ทั้ง Android และ IOS เป็นตัวที่มาจาก React ที่ไว้สร้าง user interface ของ facebook

 

บันทึก

  • React  ใช้สร้าง user interface หน้าเว็บ
  • React Native สร้าง Mobile Application

 

สมัยนี้ภาษาเว็บสามารถทำ Application ได้ ซึ่งเจ้า React Native คือ 1 ใน Framework ที่สามารถเขียน app ได้ทั้ง android และ ios

 

อีกทั้ง React Native เมื่อทำการ build มันจะแปลงเป็นภาษา Platform ตามที่เราต้องการเช่น IOS จะแปลงเป็น Objective-c Android จะแปลงเป็น Java Application ที่ได้จะเหมือนแบบ Native เพราะใช้ UI Component ของ Platform นั้นๆ และยังสามารถใช้ลูกเล่นของมือถือได้ (เหมือน Cordova ใน phonegap และ Ionicframework) เช่น กล้องถ่ายรูป, location, Toast, Alert

 

จำเป็นต้องมีความรู้เรื่อง

 

เตรียมความพร้อม Android

1. ติดตั้ง JDK (ถ้าเวอร์ชั่น 1.8 มีปัญหาให้ใช้เวอร์ชั่น 1.7
2. ติดตั้ง Android SDK
3. กำหนด Environment ของ SDK  โดยไปที่

 

My Computer > คลิกขวาเลือก Properties > เลือก Advanced System setting  > เลือก Environment Variables > ตรง System variables กด New > ช่อง Variable name ใส่เป็น ANDROID_HOME > ช่อง Variable value ใส่เป็น Path ของ Android SDK เรา

 

1
คลิกขวาเลือก Properties

 

2
เลือก Advanced System setting

 

3
เลือก Environment Variables

 

4
ตรง System variables กด New

 

5
ช่อง Variable name ใส่เป็น ANDROID_HOME และช่อง Variable Value ใส่ Path ของ Android SDK

4. ติดตั้ง Configure SDK

AndroidSDK1
ภาพจาก: https://facebook.github.io/react-native
AndroidSDK2
ภาพจาก: https://facebook.github.io/react-native

5. ติดตั้ง Android Emulator
ในบทความนี้ผมแนะนำ Genymotion เข้าไปดาวน์โหลดได้เลย

 

วิธีการติดตั้ง React-Native

    1. เราจะใช้ NodeJS ในการติดตั้ง React-Native

Command line

  • $ npm install -g react-native-cli
  • $ react-native init myApp
    1. เข้าไปที่ไฟล์ myApp แล้วลองทดสอบรัน

Command line

  • $ cd myApp
  • $ react-native run-android

เป็นอันเสร็จเรียบร้อยสำหรับการติดตั้ง React-Native พร้อมเขียน Application แล้วครับ

12717231_673237766151329_1794115651030036267_n
ผลลัพธ์จากการ Run android

กรณี Error

กรณี Error คล้ายคำว่า :app:prepareComAndroidSupportAppcompatV72301Library ที่เกิดขึ้นใน cmd/Terminal ให้เราเปลี่ยนเวอร์ชั่น JDK เป็นเวอร์ชั่น 1.7.x แทน

 

กรณีแจ้งเตือนสีแดงว่า Unable to download JS bundle ให้พิมพ์นี้ใน cmd/terminal แล้วกด Reload JS

Command line

  • $ adb reverse tcp:8081 tcp:8081

กรณี Error คำว่า app:installDebug ให้เข้าไปที่ไฟล์ android/build.gradle เปลี่ยนเป็นเวอร์ชั่นตาม Shell ข้างล่างนี้

android/build.gradle

  • dependencies {
  •    classpath ‘com.android.tools.build:gradle:1.2.3’
  •    …
  • }

อยากสอบถามตรงไหน INBOX มาได้เลยครับ

บันทึกแนะนำ