React Native [2022] มาเตรียมเครื่องให้พร้อมเขียน Mobile App กัน

Karn Yongsiriwit
3 min readAug 22, 2022

--

บทความนี้จะเกี่ยวกับ React Native อัพเดทเนื้อหาปี 2022 มาเตรียมเครื่องให้พร้อมเขียน Mobile App กัน โดยเป็นการติดตั้งโปรแกรม และ set ค่าต่าง ๆ ในเครื่อง ใช้ Windows เป็นหลักนะครับ ไม่ยากแต่แอบเยอะครับ 555

แปะ clip สามารถดูตามจาก clip ได้ครับ

Software Installation

เตรียมสภาพแวดล้อมของเครื่องตามที่อธิบายในเว็บไซต์ของ React Native: https://reactnative.dev/docs/environment-setup
โดยผมจะเลือกใช้เป็น React Native CLI จะให้ยกตัวอย่างการติดตั้งที่เครื่องของผมที่เป็น Windows และทดสอบด้วย Android Studio นะครับว่าต้องทำอย่างไรบ้าง

  • ติดตั้ง Chocolatey และ openjdk

1.เปิด Windows PowerShell ด้วยสิทธิของ Admin ดังภาพ

2.เรียกคำสั่งด้านล่างเพื่อติดตั้ง Chocolatey อ้างอิงจาก Link

Set-ExecutionPolicy AllSigned

จากนั้นเรียกคำสั่ง

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

3.ติดตั้ง openjdk ด้วย chocolatey
ให้ปิด powershell แล้วเปิด powershell หรือ command prompt ขึ้นมาใหม่ จากนั้นให้รันคำสั่ง

choco install -y openjdk11
  • ติดตั้ง Android Studio

1.ดาวน์โหลดและติดตั้ง Android Studio จาก https://developer.android.com/studio

2.ดาวน์โหลด Android SDK เป็นตัว Android 12 (S) ดังภาพ

3.ดาวน์โหลด Android Virtual Device (AVD) สำหรับเป็น emulator ทดสอบ app ของเรา ขั้นตอนดังภาพด้านล่าง

สามารถกดปุ่ม play เพื่อทดสอบ emulator ได้

เมื่อทดสอบรัน emulator ได้แล้ว ให้ปิดหน้าต่างของ emulator และ android studio ไปทั้งหมด

4.ตั้งค่า ANDROID_HOME และ path ใน system environment ขั้นตอนตามภาพ

ใส่ Variable
Variable name: ANDROID_HOME
Variable value: %LOCALAPPDATA%\Android\Sdk

เพิ่ม
%LOCALAPPDATA%\Android\Sdk\platform-tools

เริ่มต้นสร้างแอป

เปิด Command Prompt และรันคำสั่งด้านล่างเพื่อสร้างแอป React Native

npx react-native init ReactNativeHello

เปิด VS Code แล้วเลือกเปิด folder ReactNativeHello จากนั้นเปิด terminal เพื่อรันคำสั่งด้านล่าง

npx react-native run-android

แก้ไข Storage ใน Emulator

--

--

Karn Yongsiriwit

Lecturer at Digital Innovation Technology, Rangsit University