Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบเครือข่าย >> อินเทอร์เน็ต

Build React Native App แบบ Offline: วิธี Classic Approach

โดย Panth Solanki

เราทราบดีว่าถึงเวลาเรียน React Native แล้ว มี 2 วิธีพัฒนาเป็น Doc Section นี้ Focus สร้าง Apps ใน Expo โดยตรงบน Android Device โดยไม่ต้องการ Internet Connection บน Device

รู้ว่าง่ายด้วย Expo Client App บน Device พร้อม Internet แต่ถ้ามี Internet Issue? ไม่อยากใช้ Limited MBs สำหรับ Development ถ้า Mobile WiFi Stability Issue หรืออยาก Develop แบบ Old-school… หรือเหตุผลอื่น?

เริ่มต้นเลย Process นี้แค่ 3 ขั้นตอนเล็กๆ จำไว้: สำหรับ Development บน OS Windows และ Target OS Android

Pre-Setup Requirements

ต้อง Install ADB Driver บน PC จาก ที่นี่ Procedure ที่นี่ ที่นี่

Complete Process แล้ว Connect Mobile กับ PC เปิด Command Prompt รัน Command adb devices. หาก Return Device Name Under List of Devices, Setup เสร็จ แต่ถ้าไม่มี Name แสดง ต้อง Install ADB Drivers ให้ถูกต้อง

Note: Mobile ควรมี USB Debugging ON ใน Developer Options

Install Expo Client App จาก Play Store ที่นี่.

Setup React Native Project

Follow Steps ใน Docs ที่นี่.

Copy Steps ที่นี่ สมมติว่ามี Node 10+ Installed รัน Commands:

npm install -g expo-cli

expo init AwesomeProject

cd AwesomeProject

npm start

Commands ข้างบนจะเปิด Browser ด้วย https://localhost:19002 (ถ้าไม่เปิด Auto ให้เปิด Manual)

เปิด Localhost จะแสดง Message Tunnel Ready ด้านล่าง:

Build React Native App แบบ Offline: วิธี Classic Approach Tunnel Ready หมายถึงถึงเวลาสร้าง Magic :)

Post-Setup Steps

ตอนนี้ Connect Device และเปิด Command Prompt อีกอัน รัน Commands:

adb devices // หา Device Name ของ Connected Devices

adb -s reverse tcp:8081 tcp:8081 // จะไม่ Print อะไร

ไป https://localhost:19002 ใน Browser คลิก Run on Android device/emulator.

Build React Native App แบบ Offline: วิธี Classic Approach คลิก Run on Android device/emulator เพื่อดู Magic บน Device

ตอนนี้จะเห็น Bundles Loading บน Device หลัง Load Bundles ทั้งหมด App จะ Live บน Device และ Browser จะเป็น:

Build React Native App แบบ Offline: วิธี Classic Approach Sidebar จะแสดง Device ของคุณ

Debug App ได้โดยคลิก Top-Right Button

Build React Native App แบบ Offline: วิธี Classic Approach คลิก Top-Right Button เห็น Data ที่ Pass ไป Device

จะมีความสุขหากข้อมูลนี้มีประโยชน์ ถ้ามีคำถาม Comment ได้เลย — จะช่วยด้วยความยินดี

Thanks for reading.

เรียนรู้เขียนโค้ดฟรี หลักสูตรโอเพนซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานเป็นนักพัฒนา เริ่มต้นได้เลย