React Native Tools - เครื่องมือจำลองเครื่องที่ต้องรู้ถ้าจะเขียน React Native

React Native Tools - เครื่องมือจำลองเครื่องที่ต้องรู้ถ้าจะเขียน React Native
12/02/19   |   2.1k   |  

นำเรื่องก่อนเลย หลายๆคนคงจะรู้จัก React Native มาไม่น้อยครับ ซึ่งมันก็คือ framework ตัวหนึ่งที่เราใช้สร้าง native app โดยมี code base เป็น React (Javascript) นั้นแหละครับ

แต่ตัว native app ที่เราสร้างขึ้นมาเนี่ย มันไม่ได้รันแบบ web app ทั่วไปหนะสิ เพราะมันเป็น native app ก็คงต้องรันแบบ app ทั่วไปบนมือถือ

แล้วจะทำยังไงหละ ให้เอา code หรือ native app ที่สร้างขึ้นไปรันบนมือถือ

 

ก็ตามนี้แหละครับ มันก็เลยต้องมีเครื่องมือหรือ tool อะไรสักอย่าง เพื่อจำลองมือถือขึ้นมาในเครื่องคอมฯของเรา ซึ่งในบทความนี้ผู้เขียนจะมาแนะนำ tool สำหรับจำลองเครื่องกันครับ

 

ต้องบอกก่อนว่าบทความนี้แค่มาแนะนำ tool นะครับ ส่วนการ config เพื่อใช้งานกับการเขียน react native จะยังไม่ขอเขียนในบทความนี้ละกันนะครับ

 

  • ตัวแรกเป็นตัวนี้ครับ xcode รูปร่างหน้าตาก็จะประมาณนี้

xcode

 

เครื่องมือตัวนี้ใช้จำลองเครื่องมือถือที่มีระบบปฏิบัติการแบบ ios ครับ

 

  • ตัวต่อมาครับ Genymotion หน้าตาแบบนี้ครับ

genymotion

 

เครื่องมือตัวนี้ใช้จำลองมือถือที่มีระบบปฏิบัติการแบบ android ครับ

 

ปกติ Genymotion จะต้องใช้ร่วมกับ tool อีกตัวครับ

 

  • ตัวนี้เรียกว่า Android Studio ครับ

andriod studio

 

ซึ่งถ้าจะพูดกันตรง ๆ ตัว Android Studio เองก็สามารถจำลองเครื่องมือถือได้เหมือนกัน แต่ทำไมเราไม่ใช้ Android Studio เลยหละ ทำไมต้องใช้ร่วมกับ Genymotion

คำตอบก็คือ เพราะเมื่อก่อน ตัว Android Studio มันช้ามากกก ครับ เพราะมันช้ามากแล้วยัง config ยากอีก เลยมีคนทำ tool ขึ้นมาช่วยก็คือ Genymotion นั่นแหละครับ

แต่ถ้าเป็นตอนนี้หละ ใช่ครับไม่เถียงเลยว่าตอนนี้ตัว Android Studio มันไวขึ้นแล้ว ไวขึ้นมากด้วย ซึ่งก็ใช้มันแค่ตัวเดียว จำลองเครื่องมือถือได้เลยโดยไม่ต้องใช้ tool อื่นมาช่วย แต่ก็นั่นอีกแหละครับ อาจเป็นเพราะความคุ้นชินหรือความง่ายของ Genymotion คนก็เลยใช้สองตัวนี้ร่วมกันอยู่

 

โดยการจำลองเครื่องขึ้นมาทั้ง 2 ระบบปฏิบัติ จำเป็นต้องมี expo-cli เพื่อจัดการ tool ครับ


การ config ต่าง ๆ เพื่อทำให้ run native code ได้ สามารถติดตามได้ในบทความนี้ได้ครับ วิธีรัน Genymotion ด้วย Expo สำหรับ React Native และ รัน React Native บน IOS Simulator ง่ายๆ ด้วย Expo

 

แต่ ......

ถ้าหากว่าใครไม่อยากจะจำลองมือถือในเครื่องคอมฯตัวเอง ก็สามารถรัน native app ได้เหมือนกันแต่คุณจะต้องมีเจ้านี่ก่อน

 

  • ตัวนี้เป็น app ที่ต้องติดตั้งบนมือถือของเราเองครับ หยิบมือถือออกมาแล้ว Search คำว่า expo ใน App Store หรือ Google Play Store ได้เลยครับ

expo.io

 

แอพตัวนี้จะทำการรัน native app ให้เรา โดยจะรันบนมือถือของเราจริง ๆ ไม่ต้องจำลองเครื่องมือถือขึ้นมาครับ

 

 

ส่วนใหญ่ tool ที่ใช้ก็จะมีประมาณนี้ครับ ซึ่งการ config เพื่อใช้งานร่วมกับการเขียน react native สามารถติดตามไ้ดจากบทความที่แปะให้ก่อนหน้าได้ครับ

 

สุดท้ายขอขอบคุณผู้อ่านทุกคนที่เข้ามาอ่านนะครับ หวังว่าบทความนี้จะเป็นประโยชน์ต่อใครไม่มากก็น้อย ขอบคุณมากครับ

 

บทความต่อไปจะเป็นเรื่องอะไร รอติดตามกันได้ครับ

 

Reference

- https://cdn-images-1.medium.com/max/2600/1*JSy7oIuo5VM_RP4BVbOSZw.png

- https://developer.apple.com/news/images/xcode-og.png

- https://i0.wp.com/qavalidation.com/wp-content/uploads/2016/05/genymotionlogo-1.jpg?resize=310%2C223

- https://www.geekshangout.com/wp-content/uploads/2016/02/android-studio-logo.png

- https://image.slidesharecdn.com/developingbuildingtestinganddeployingreactnativeapps-171005090218/95/developing-building-testing-and-deploying-react-native-apps-14-638.jpg?cb=1507194321

tags : react native tools



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email