React Native Beginner
เป้าหมาย:
เตรียม macOS ให้พร้อมสำหรับการสร้างแอป React Native (แบบ Native – Android และ iOS)
1.เตรียมเครื่องก่อนติดตั้ง
สเปกเครื่องที่แนะนำ
OS: macOS Ventura หรือใหม่กว่า
RAM: อย่างน้อย 8 GB (แนะนำ 16 GB ขึ้นไปเพื่อรัน Android Emulator + iOS Simulator พร้อมกัน)
พื้นที่ว่างในเครื่อง: 15 GB ขึ้นไป
(Android SDK, Xcode, Gradle, Node Modules กินพื้นที่มาก)
2.ติดตั้งเครื่องมือพื้นฐาน
- Homebrew (ตัวช่วยติดตั้งเครื่องมือ)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- Node.js (แนะนำใช้ nvm หรือ volta) ติดตั้ง Node.js และแนะนำเวอร์ชัน (เช่น node >= 18)
brew install volta /or
volta install node
ตรวจสอบการติดตั้ง node
node -v
- ติดตั้ง NPM
node install npm
ตรวจสอบการติดตั้ง npm
npm -v
- ติดตั้ง Watchman (สำหรับ macOS ใช้ตรวจจับไฟล์เปลี่ยน)
brew install watchman
ตรวจสอบการติดตั้ง
watchman -v
- ติดตั้ง cocaopods
brew install cocoapods
- ติดตั้ง JDK (Java Development Kit)
brew install temurin17
ตรวจสอบการติดตั้ง Java
java -version
3.ติดตั้ง xcode and simulator (iPhone 16 pro and iOS 18.5)
https://apps.apple.com/us/app/xcode/id497799835?mt=12/
4.ติดตั้ง andriod studio
https://developer.android.com/studio?authuser=6&hl=th
ตั้งค่าดังนี้
4.1.ไปที่ sidebar Tools -> SDK manager
4.2.Android SDK Build-Tools Version 35.0.0
4.3.ติดตั้ง NDK (side by side) 27.1.12297006
4.4.ติดตั้ง Andriod SDK-Command-line Tools (lastest)
4.5.CMake 3.22.1
4.6.Andriod Emulator, Andriod SDK Platform Tools
- in /.zshrc file
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$ANDROID_HOME/b$
export ANDROID_NDK_HOME=$ANDROID_HOME/ndk/your-version
export PATH=$ANDROID_NDK_HOME:$PATH
export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"
export CPPFLAGS="-I/opt/homebrew/opt/openjdk@17/include"
5.สร้าง project in VScode
npx @react-native-community/cli init MyReactNativeFirst
answer Y เพื่อ install pod
สร้าง file local.properties in andriod folder
cmake.dir=/Users/your-user-name/Library/Android/sdk/cmake/3.22.1
ndk.dir=/Users/your-user-name/Library/Android/sdk/ndk/27.1.12297006
- on MacOS สำหรับกำหนดค่า memory ในเครื่อง และภาษาเพื่อให้เสถียร
#Specifies the JVM arguments used for the daemon process.
#The setting is particularly useful for tweaking memory settings.
#Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
org.gradle.jvmargs=-Xmx2048m -Duser.country=US -Duser.language=en -XX:MaxMetaspaceSize=512m
📌 แล้วทำไมมักเห็นใน org.gradle.jvmargs?
เพราะบางครั้ง Gradle หรือ plugin บางตัวอาจจะแสดงผลลัพธ์แตกต่างกันไปตาม locale ของเครื่อง
เช่น:
เครื่อง dev เป็นภาษาไทย → build log หรือ error message ออกมาเป็นภาษาไทย
เวลาเขียน shell script หรือเขียน plugin แล้วเอาไปใช้บน server (ที่ใช้ locale อังกฤษ) → อาจเจอพฤติกรรมต่างกัน
🎯 ดังนั้นจึงตั้ง -Duser.country=US -Duser.language=en เพื่อให้ผลลัพธ์ทุกคนเหมือนกัน (ใช้ US/English เสมอ)
6.run project
cd MyReactNativeFirst
|
v
npm install
- ถ้ามี error
npx react-native doctor
- ถ้าอยากดู รายละเอียด
npx react-native info
7.รัน android
react-native run-android
8.รัน ios
react-native run-ios
Top comments (0)