มีคนถามเข้ามาหลายคนว่า ลง React Native บน Windows ยังไง? ทำไมลงแล้วไม่เห็นได้เลย ก็เลยมาเขียนบทความนี้เพื่อเป็นแนวทางในการ install
Intro
ในการติดตั้งนี้จะมีอยู่ 6 ส่วนใหญ่ๆแนะนำให้ทำตาม step ไปเรื่อยๆเพื่อลดปัญหาและความผิดพลาดที่จะเกิดขึ้น และถ้าในส่วนใดท่านมี packageอยู่แล้วให้ข้ามไปส่วนต่อไปได้เลยนะครับ
1. Chocolatey
เริ่มต้น ด้วยการลง Chocolatey โดยสามารลงได้ผ่าน 3 ช่องทางคือ
Cmd.exe
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"PowerShell.exe
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))PowerShell v3+
iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iexสำหรับตัวอย่างจะมีเฉพาะลงผ่าน Cmd.exe เท่านั้นนะครับ
โดยเริ่มจาก
เปิด Cmd.exe ด้วยสิทธิ์ administrator
หลังจากเปิดแล้วจะได้ดังภาพ
หลังจากนั้นวางคำสั่งด้านล่างลงไป แล้ว Enter
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
รอติดตั้งสักครู่ ถ้าไม่มีError ก็เป็นอันสำเร็จ
2. Node.js
สำหรับการลง Node.js จะทำผ่าน Cmd.exe ด้วยสิทธิ์ administrator โดยใช้คำสั่ง
choco install nodejs.installเมื่อ Enter คำสั่งไปแล้วจะการถามเพื่อยืนยันการ run scirpt ให้พิมพ์ Y แล้ว Enter
รอติดตั้งสักครู่ ถ้าไม่มีError ก็เป็นอันสำเร็จไปสู่ขั้นตอนต่อไป
**ในกรณี Error คำสั่ง choco ให้ทำการปิด Cmd.exe ไปแล้วเปิดมาใหม่
3. Python2
สำหรับการลง Python2 จะทำผ่าน Cmd.exe ด้วยสิทธิ์ administrator โดยใช้คำสั่ง
choco install python2เมื่อ Enter คำสั่งไปแล้วจะการถามเพื่อยืนยันการ run scirpt ให้พิมพ์ Y แล้ว Enter
รอติดตั้งสักครู่ ถ้าไม่มีError ก็เป็นอันสำเร็จไปสู่ขั้นตอนต่อไป
4. React Native CLI
ถึงตรงนี้ถ้ายังเปิด Cmd.exe อยู่ให้ปิดแล้วเปิดใหม่ด้วย ด้วยสิทธิ์ administrator แล้วพิมพ์สำครั้งเพื่อ install CLI
npm install -g react-native-cliเมื่อRun คำสั่งแล้วให้รอสักครู่ถ้าไม่มี error ถือเป็นการสำเร็จ
5. Install Android Studio
ต่อมาให้ install android studio ให้เรียบร้อย
Download Android Studio
โดยสามารถ Download ได้จาก
และดูวิธีติดตั้งได้จาก
Install SDK
หลังจากนั้น ต้อง install SDK Android 6.0 (Marshmallow) รวมถึง System Image ของ Android 6.0 ด้วย
โดยเริ่มจากเปิด Android Studio ขึ้นมา
เลือก Configure ด้านขวาล่าง แล้วเลือก SDK Manager
หลังจากนั้นจะแสดงหน้าต่าง SDK Manager
หลังจากนั้นให้เปิด Standalone SDK Manager ขึ้นมา โดยกดที่ Launch Standalone SDK Manager ด้านล่าง
หลังจากนั้นจะแสดงหน้าต่าง Standalone SDK Manager ขึ้นมา
ในส่วน Tools ให้เลือก Android SDK Build-tools 23.0.1
ต่อมา ในส่วน Android 6.0 (API 23) ให้เลือก
- SDK Platform
- Google APIs Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom System Image
หลังจากนั้น กดปุ่ม Install ด้านขวาล่าง แล้วรอจนกว่าจะ install เสร็จ
Config environment variable
และสุดท้ายเราต้องทำการตั้งค่า ANDROID_HOME environment variable โดย
ให้เปิดหน้าต่าง system แล้วเลือก Advanced system settings ดังภาพ
ต่อมาจะแสดงหน้าต่าง System Properties ขึ้นมา
ให้เลือก Environment Variables…
หลังจากนั้นจะแสดงหน้า Environment Variables ขึ้นมา
ให้เลือก New.. ในส่วน System variables
ต่อมาจะแสดงหน้าต่าง New System Variable ขึ้นมา
ในส่วน Variable name: ให้ใส่ ANDROID_HOME
และส่วน Variable value: ให้ใส่ path ของ Android SDK
ซึ่งสามารถดูได้จากตอนเปิด Android Studio แล้วเปิด SDK Manager ขึ้นมาจะแสดง Android SDK Location:
6. Test
ขั้นตอนสุดท้ายเป็นการทดสอบเพื่อตรวจดูว่าทั้งหมดที่เราตั้งค่าไปสามารถทำงานได้ถูกต้อง
โดยเริ่มจาก การสร้างกล่อง Project สำหรับทดสอบก่อน
แล้วทำการเปิด Cmd.exe แล้วไปที่กล่อง Project หรือจะใช้วิธี
กดปุ่ม shift ที่คีย์บอร์ดค้างไว้แล้วคลิกขวาที่กล่องProject
shift+right click
แล้วเลือก Open command window here
ก็จะเปิดการเปิด Cmd.exe แล้วอยู่กล่องProjectทั้งที
หลังจากนั้นให้พิมพ์คำสั่ง
react-native init AwesomeProjectเพื่อสร้างProject ทดสอบชื่อว่า AwesomeProject
เมื่อทำงานสำเร็จแล้วจะได้กล่อง AwesomeProject เพิ่มขึ้นมาภายในกล่องProject
ให้ทำการเข้าไปที่กล่อง AwesomeProject โดยใช้คำสั่ง
cd AwesomeProject
หลังจากนั้นให้ทำการสร้าง Android Virtual Device จาก system image แล้วเปิดให้ทำงาน เมื่อ Android Virtual Device เปิดเสร็จแล้ว
ให้ทำการสั่งให้ React Native ทำการRun โดยใช้คำสั่ง
react-native run-android
หลังจากนั้นรอ Download gradle สักพักนึงตรงนี้อาจจะใช้เวลานานหน่อย
เมื่อDownload เสร็จจะทำการ compile code และ run ให้
เมื่อทำการRun project เสร็จจะมีการเปิด react native js server
แล้วจะ install app ลง Android Virtual Device ดังภาพแสดงว่าติดตั้งสำเร็จแล้ว
Conclusion
จะเห็นว่าขั้นตอนการลงไม่ได้ยากเย็นอะไรแต่ต้องใช้เวลากับ internet ที่แรงพอสมควรนะครับ