เริ่มต้นกับ React Native [Setup] ฉบับพาแก้ปัญหาเล็กน้อย

จากที่ผมได้แนะนำ React Native ไปแล้วที่ ทำความรู้จักกับ React Native ก่อนเริ่มต้นใช้งาน วันนี้ผมจะพามาติดตั้งเจ้า React Native และตัวอื่น ๆ ที่จำเป็นจะต้องใช้นะครับ มาเริ่มกันเลย

สำหรับ Mac OS

ขั้นแรกติดตั้ง Node กับ Washman ก่อนเลยครับ ตามนี้

brew install node 
brew install watchman

จากนั้นลง React Native CLI ตามไปครับ

npm install -g react-native-cli

Android Tools

ต่อไปให้ดาวน์โหลด JDK มาแล้วก็ติดตั้งครับ คลิกที่นี่ และให้ติดตั้ง Android Studio ด้วยนะครับ คลิกที่นี่ SDK ก็ติดตั้งตามค่าเริ่มต้นไปเลยครับ

วิธีติดตั้งคงไม่ต้องอธิบายนะครับ ง่ายมาก ๆ เลย :)

สำหรับ Emulator ก็ใช้ของ Android Studio เลยก็ได้ครับเป็น Android M กำลังดีครับ แต่ถ้าใครที่ทำเกี่ยวกับแผนที่ เน้นใช้ GPS หน่อย ก็แนะนำตัว Genymotion เลยครับ เดี๋ยวนี้ตัวใหม่ ๆ ก็ติดตั้ง Google Service ได้ในคลิกเดียวแล้วครับ

เมื่อติดตั้ง Android Studio และ SDK เรียบร้อยแล้ว ก็ให้ทำการ Set path ไว้ด้วยนะครับ เพื่อเจ้า React Native จะได้เอาไป Compile ตัวโค้ด Android นะครับ ถ้าไม่ได้เปลี่ยน Path อะไรก็พิมพ์ตามนี้เลยครับ

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools

เรียบร้อยแล้วนะครับ ในส่วนของ Android เดี๋ยวหลังจากสร้าง Project ต้องจัดการอะไรบางอย่างต่อนิดหน่อยครับ อ่านต่อได้ที่หัวข้อ “เริ่มต้นสร้าง Project” เลย

IOS Tools

แทบไม่มีอะไรเลยครับ แค่เข้าไปที่ App Store จากนั้นโหลด Xcode มาติดตั้งเสร็จ แล้วไปที่ Preferences จากนั้นจะมีหน้าต่างขึ้นมา ให้เราไปที่แท็บ Locations ตรงที่ Command Line Tools ให้เลือกเป็น Version ล่าสุดเลยครับ

สำหรับ Windows

ส่วนนี้จะแนะนำแค่ Android นะครับ เพราะใน Windows ไม่สามารถใช้ Xcode ได้ ก่อนอื่นก็ลง Node Python2 และ JDK ไปก่อนเลยครับ ทาง Facebook แนะนำให้ใช้ Chocolatey ในการติดตั้ง เพราะมันติดตั้งง่ายมาก ๆ เลย หาติ้งตั้ง Chocolatey เรียบร้อยแล้ว พิมพ์ตามนี้เลยครับ

choco install -y nodejs.install python2 jdk8

แต่ถ้าหากใครอยากจะดาวน์โหลดมาติดตั้งแยกเองทีละตัวก็ได้เหมือนกันนะครับ อันนี้แล้วแต่ความชอบส่วนบุคคลเลยนะครับ

ต่อไปก็ติดตั้ง React Native CLI ครับ

npm install -g react-native-cli

ต่อไปก็ให้ติดตั้ง Android Studio เหมือนของ Mac OS เลยนะครับ จากนั้นก็ทำการ Set environment variable ถ้าไม่ได้เปลี่ยน SDK Path ก็ตามนี้เลย

C:\Users\{yourname}\AppData\Local\Android\Sdk

ภาพจาก : https://facebook.github.io/react-native/docs/getting-started.html

เริ่มต้นสร้าง Project

สร้างโปรเจคด้วยการพิมพ์คำสั่งตามนี้เลย

react-native init MyApp

…รอสักครู่ เราก็จะได้โปรเจคมา จากนั้นมาทดสอบ run ดูกันครับ ก่อนอื่นทำการ Change directory ไปยังโปรเจคของเราก่อน ด้วยคำสั่ง

cd MyApp

จากนั้นทำการ run ตามด้านล่างนี้เลยครับ

สำหรับ IOS

พิมพ์ตามนี้เลยครับ

react-native run-ios

เราก็จะพบกับ MyApp ของเราแล้ว

ภาพจาก : https://facebook.github.io/react-native/docs/getting-started.html

สำหรับ Android

จริง ๆ แล้วเราสามารถเปิด Emulator แล้วใช้คำสั่ง ตามนี้เลยได้

react-native run-android

แต่บางครั้งอาจจะมีปัญหา build ไม่ได้บ้าง หรืออะไรต่าง ๆ ก็แล้วแต่ ผมแนะนำว่าใช้ Android Studio มาช่วย debug จะดีกว่านะครับ แต่เมื่อเราเปิดโปรเจคด้วย โปรแกรม ก็จะเจอปัญหาต่าง ๆ ผมจะมาแนะนำวิธีแก้ดังนี้ครับ

ปัญหาเบื้องต้น หลัก ๆ แล้ว ก็คือการกำหนด buildToolsVersion ที่ต่ำเกินไปครับ เปิด Android Studio แล้ว open ไปที่โฟลเดอร์ android ในโปรเจคเราเลยครับ หากใช้ Android Studio 3 ขึ้นไปก็จะพบกับข้อความประมาณนี้ครับ

ใจความก็ประมาณว่า

เพื่อรับฟีเจอร์ล่าสุด เช่น Instant Run และปรับปรุงเรื่องความปลอดภัย เราแนะนำคุณเป็นอย่างยิ่ง ให้ update เจ้า Gradle plugin เป็น version 3.0.1 และ Gradle เป็น version 4.1

ตรงนี้กด Don’t remind… หรือ Remind me tomorrow ไปก่อนครับ เพราะว่า React Native ยังไม่รองรับครับ

ต่อไปให้ไปที่ไฟล์ build.gradle (Project: MyApp) แล้วแก้ไข classpath เป็น

classpath 'com.android.tools.build:gradle:2.3.3'

แก้ไฟล์ build.gradle (Module: app)

compileSdkVersion 25
buildToolsVersion "25.0.0"
// ในส่วน dependencies
compile "com.android.support:appcompat-v7:25.0.0"

จากนั้นกด Sync now แล้วรอสักครู่ครับ ขั้นตอนนี้สำหรับคนที่ไม่ได้ติดตั้ง build tools version 25.0.0 ไว้ก็อาจจะมีข้อความแสดงขึ้นมากให้ติดตั้ง ก็ให้ทำการกดติดตั้งไปเลยนะครับ

ที่เลือกใช้ 25.0.0 เพราะเป็น version ต่ำสุดที่ Android Studio รองรับ และเป็น version ที่ React Native ก็สามารถใช้งานได้ด้วยครับ

เมื่อเสร็จแล้วเราก็จะไม่มี error แล้ว ให้เราเปิด Emulator ไว้เลยนะครับ แล้วกลับมาที่ terminal นะครับ พิมพ์คำสั่งตามนี้

react-native run-android

ก็จะมีหน้าต่างของ node แสดงขึ้นมานะครับ React native ก็จะติดตั้ง Application ลงที่ Emulator และก็เปิดขึ้นมาดังภาพครับ

สำหรับใครที่ Error นะครับ ก็แนะนำให้สั่ง run ด้วย Android Studio นะครับ โดยที่เปิดตัวหน้าต่าง node ไว้ด้วยนะครับ