React Native [2022] มาเตรียมเครื่องให้พร้อมเขียน Mobile App กัน
บทความนี้จะเกี่ยวกับ React Native อัพเดทเนื้อหาปี 2022 มาเตรียมเครื่องให้พร้อมเขียน Mobile App กัน โดยเป็นการติดตั้งโปรแกรม และ set ค่าต่าง ๆ ในเครื่อง ใช้ Windows เป็นหลักนะครับ ไม่ยากแต่แอบเยอะครับ 555
แปะ clip สามารถดูตามจาก clip ได้ครับ
Software Installation
- Node.js (เลือกเป็น version LTS) https://nodejs.org
เตรียมสภาพแวดล้อมของเครื่องตามที่อธิบายในเว็บไซต์ของ 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
