ไม่มีอะไรดีไปกว่าการสร้างแอปด้วย JavaScript เว้นแต่ว่าคุณกำลังสร้างแอพมือถือ JavaScript ใช้สำหรับสร้างเว็บแอปและใช้เพื่อสร้างแอปบนอุปกรณ์เคลื่อนที่แบบเนทีฟซึ่งไม่สามารถทำได้ เป็นเรื่องยากสำหรับนักพัฒนาเว็บที่จะดำดิ่งสู่การสร้างแอปบนอุปกรณ์เคลื่อนที่แบบเนทีฟ พวกเขาต้องเรียนรู้ Java หรือ Objective-C …หรือภาษาการเขียนโปรแกรมใด ๆ ที่ใช้เพื่อการนี้
นั่นคือจนกว่า React Native ของ Facebook จะทำลายกำแพงนี้ React Native มาพร้อมกับข้อดีมากมาย เช่น การสร้างแอปข้ามแพลตฟอร์มสำหรับทั้ง Android และ IOS ก่อน React Native คุณต้องเขียนโค้ดสองครั้ง — หนึ่งรหัสสำหรับ Android และอีกรหัสสำหรับ IOS นั่นไม่ใช่กรณีอีกต่อไป
บทความนี้เป็นการแนะนำโลกของ React Native ดังนั้นเตรียมตัวให้พร้อม ?.
ทำไมต้อง React Native?
ใช่ แล้วทำไมต้อง React native ไม่ใช่เทคโนโลยีอื่นใด
มันทำให้เรามีโซลูชั่นมากมายที่เทคโนโลยีอื่นไม่สามารถจ่ายได้ นี่คือสิ่งที่คุณสามารถทำได้ด้วย React Native:
การสร้างแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง
React Native ช่วยให้เราเขียน Native App ใน JavaScript สำหรับทั้ง iOS และ Android มันทำให้เราสามารถใช้ส่วนประกอบดั้งเดิมทั้งหมด เช่น ท่าทางสัมผัส การแจ้งเตือนแบบพุช กล้อง และตำแหน่ง มีไลบรารี JavaScript อื่นๆ สำหรับสร้างแอปบนอุปกรณ์เคลื่อนที่ เช่น ionic หรือ PhoneGap แต่ไลบรารีเหล่านั้นใช้ Webview และแอปที่สร้างด้วยเทคโนโลยีเหล่านั้นไม่ใช่ในเครื่อง
การสร้างแอปมือถือข้ามแพลตฟอร์ม (iOS และ Android)
ใช่ ด้วย React Native คุณสามารถสร้างแอพมือถือที่สามารถทำงานบน iOS และ Android นี่เป็นข้อดีอย่างหนึ่งของ React Native ก่อนที่ Facebook จะสร้างมันขึ้นมา คุณต้องสร้างแอพของคุณสองครั้งและด้วยโค้ดที่ต่างกัน:อันหนึ่งสำหรับ iOS โดยใช้ Swift หรือ Objective-C และอีกอันสำหรับ Android โดยใช้ Java หรือ Kotlin React Native แก้ปัญหานี้เพื่อให้คุณสร้างแอป React Native ได้และแอปจะทำงานใน iOS และ Android สุดยอด! ?
เขียนโค้ดของคุณใน JavaScript และ React
ขณะที่คุณกำลังสร้างแอป React Native คุณจะเขียน JavaScript จริงๆ โค้ด Reactjs ช่วยให้เราสร้าง UI และส่วนประกอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมได้
การเริ่มต้นใช้งาน react-native
การเริ่มต้นด้วย react-native อาจเป็นเรื่องที่น่าตื่นเต้น แต่ในขณะเดียวกันก็อาจทำให้สับสนได้ ขั้นตอนแรกคือการติดตั้ง และมีหลายวิธีที่จะทำ:
การใช้ expo-cli:
expo-cli เป็นเครื่องมือบรรทัดคำสั่ง มันดาวน์โหลดและติดตั้ง React Native ต้นแบบสำหรับคุณ รวมกับ expo API (ตรวจสอบที่นี่สำหรับคู่มือการติดตั้ง) เป็นวิธีที่ง่ายในการสร้างแอป React Native และเป็นวิธีที่แนะนำหากคุณเพิ่งเริ่มต้นกับ React Native
expo-cli มีตัวเลือกมากมายให้คุณ คุณสามารถเรียกใช้และทดสอบแอปพลิเคชันของคุณบนอุปกรณ์มือถือโดยไม่ต้องกำหนดค่าใดๆ สแกนโค้ด QR แล้วแอปของคุณจะเปิดขึ้นพร้อมกับแอป expo mobile คุณสามารถสำรวจแอปพลิเคชันมือถืออื่นๆ ที่สร้างด้วย React Native บนเบราว์เซอร์ผ่านเว็บอินเทอร์เฟซที่เรียกว่า appertize!
การใช้ react-native-cli
react-native-cli ทำงานเหมือนกับ expo-cli แต่ด้วยแนวทางที่แตกต่างและข้อดีพิเศษ แอพที่ติดตั้ง react-native-cli ให้ตัวเลือกและความสามารถในการสร้างโมดูลเนทีฟของเราเองในแอปของเรา คุณไม่จำเป็นต้องดีดแอปพลิเคชันออกจึงจะสามารถสร้างโมดูลดั้งเดิมได้ การดีดออกทำให้คุณสามารถใช้โมดูลเนทีฟและเขียนว่าคุณเป็นเจ้าของ (เราจะสำรวจวิธีเขียนโมดูลเนทีฟในส่วนอื่น )
การพัฒนาแอพ React Native บนแพลตฟอร์มต่าง ๆ เป็นกระบวนการที่แตกต่างกัน บางครั้งเราต้องการการกำหนดค่าบางอย่างสำหรับแพลตฟอร์มเฉพาะ ตัวอย่างเช่น ในการสร้างสำหรับ Android คุณต้องใช้ Android SDK มาสำรวจกันว่ามันทำงานอย่างไร!
การสร้างแอปมือถือสำหรับ Android
มีข้อกำหนดบางประการที่คุณต้องติดตั้งเพื่อเริ่มพัฒนาสำหรับ Android ขั้นแรก คุณต้องดาวน์โหลดและกำหนดค่าทั้ง Android SDK และ Android Studio คุณสามารถดาวน์โหลดได้ด้วยลิงก์นี้ที่นี่
หลังจากดาวน์โหลด Android Studio คุณจะต้องติดตั้ง API บางตัวด้วยเช่นกัน หากต้องการทำเช่นนั้นให้เปิด Android Studio จากนั้นคลิกแท็บการตั้งค่า หน้าต่างนี้จะเปิดขึ้น:
ขั้นแรก ให้ตรวจสอบ ✔️แพลตฟอร์มที่คุณต้องการให้ react-native ของคุณรองรับในแท็บ SDK Platforms (เช่น Android 6.0 Marshmallow) จากนั้นเปลี่ยนไปใช้เครื่องมือ SDK
แล้วตรวจสอบ Android SDK Build-Tools , Android SDK tools และ google play service . ภายใต้ Android SDK Build-Tools ให้เลือกแพลตฟอร์มทั้งหมด:
- เริ่มตั้งแต่ 19.0.0 ถึง 20.0.0
- ตั้งแต่ 22.0.0 ถึง 24.0.0
- และ 25.0.2 , 26.0.1 ถึง 26.0.3
- 27.0.3 และ 28.0.1 ถึง 28.02
ตอนนี้เราเสร็จสิ้นด้วย SDK และ Android Studio ขั้นตอนต่อไปคือโปรแกรมจำลอง อีมูเลเตอร์ (หรือตัวจำลอง) เป็นที่ที่เราต้องเรียกใช้และทดสอบแอพของเรา มีตัวเลือกมากมาย
คุณสามารถใช้โปรแกรมจำลอง Android Studio คุณตรวจสอบที่นี่ว่าจะสร้างอีมูเลเตอร์เพื่อใช้บน Android Studio ได้อย่างไร สุจริตฉันไม่เคยใช้พวกเขา ฉันชอบ Genymotion หรืออุปกรณ์จริงมากกว่า
Genymotion
Genymotion เป็นแอปพลิเคชันเดสก์ท็อปที่ให้โปรแกรมจำลองเสมือนเพื่อทดสอบแอปพลิเคชันของคุณ ฉันชอบที่จะใช้มันมากเพราะมันเร็ว ? มันให้ตัวเลือกแก่คุณในการสร้างโทรศัพท์ที่ปรับแต่งเองพร้อมคุณสมบัติที่คุณสามารถหาได้ในอุปกรณ์จริง ตัวอย่างเช่น เปิดใช้งาน Wifi ตำแหน่ง และกล้อง ฉันขอแนะนำอย่างยิ่งให้คุณใช้ Genymotion บนอีมูเลเตอร์ Android Studio หรืออีมูเลเตอร์อื่นๆ
การใช้อุปกรณ์จริง
ไม่มีอะไรดีไปกว่าการใช้อุปกรณ์จริงเพื่อเรียกใช้และทดสอบแอปของคุณ นี่เป็นเพราะมันช่วยให้คุณรู้ว่าแอปพลิเคชันของคุณดูเหมือนกับอุปกรณ์จริงอย่างไร มันทำให้คุณรู้สึกถึงความเป็นจริงของงานของคุณในแบบที่อุปกรณ์เสมือนไม่ได้ให้ ดังนั้นหากคุณมีความสามารถในการใช้อุปกรณ์ อย่าลังเลใจ
จนถึงตอนนี้ เราใช้ได้กับ Android แต่ iOS ล่ะ
การสร้างแอป react-native สำหรับ IOS
การรัน React Native สำหรับ iOS นั้นดูไม่แตกต่างจาก Android มากนัก แอป React Native เดียวกันที่ทำงานบน Android สามารถทำงานบน iOS ได้เช่นกัน โดยมีข้อยกเว้นบางประการ
ตัวอย่างเช่น หากคุณต้องการใช้งานบนอุปกรณ์ iOS คุณต้องมี MacOS เมื่อพูดถึง MacOS และ iOS คุณไม่จำเป็นต้องดาวน์โหลดการพึ่งพาเพิ่มเติมใดๆ เช่น SDK สำหรับ Android เพื่อเรียกใช้ React Native บน iOS
เกี่ยวกับโปรแกรมจำลอง Xcode มีโปรแกรมจำลองที่ดีที่คุณสามารถใช้เพื่อทดสอบแอป React Native ของคุณ คุณสามารถตรวจสอบโพสต์นี้ที่แสดงเทคนิคบางอย่างเพื่อใช้กับ Emulators
ใน MacOS คุณสามารถเรียกใช้ทั้ง iOS และ Android คุณสามารถติดตั้ง Android Studio และ Genymotion บน MacOS ได้อย่างแน่นอน ความเป็นไปได้นี้ไม่มีอยู่ในพีซีที่คุณสามารถเรียกใช้โปรแกรมจำลอง Android เท่านั้น แต่ไม่สามารถเรียกใช้โปรแกรมจำลอง iOS ดังนั้นคุณจึงโชคดี ?ถ้าคุณมี MacOS — เพลิดเพลิน ?.
ตอนนี้เรามีสภาพแวดล้อมในการสร้างแอป React Native และเราได้ติดตั้งทุกอย่างแล้ว แต่โค้ด React Native เขียนอย่างไร? ง่ายมาก:คุณจะเขียนโค้ด Reactjs ได้จริง
คุณสามารถตรวจสอบคู่มืออย่างเป็นทางการเพื่อฝึกฝนกับ React Native ฉันแนะนำบทความดีๆ นี้เพื่อเริ่ม "React Native YouTube Replica" มันจะแนะนำคุณทีละขั้นตอนในการสร้างแอป React Native แรกของคุณ
ว้าว! จนถึงตอนนี้คุณสบายดีและกำลังเขียนโค้ดด้วย react-native ? แต่คุณต้องตรวจสอบและแก้ไขข้อผิดพลาดของคุณ และดูบันทึกของรหัสของคุณ ใช่บันทึก!! ดังนั้นเราต้องการ งebugger! คุณจะดีบักด้วย React Native อย่างไร
การดีบัก react-native
การดีบักโค้ดของคุณมีความสำคัญมาก ไม่ใช่แค่กับ React Native แต่กับภาษาการเขียนโปรแกรมอื่นๆ ดังนั้นในโค้ด React Native ของคุณ คุณจำเป็นต้องรู้ว่าเกิดอะไรขึ้น มีหลายวิธีในการดีบักแอป React Native เช่น:
ดีบักด้วย Chrome devtools
React Native ให้ตัวเลือกแก่คุณในการใช้ Chrome devtools เพื่อดูบันทึกของแอปของคุณ ในการดีบักด้วย Chrome และเปิดใช้งานโหมดแก้ไขข้อบกพร่องในโปรแกรมจำลองของคุณ ให้คลิก Ctrl+ m บนแป้นพิมพ์ .
หน้าจอนี้จะปรากฏขึ้น:
จากนั้นเลือก Debug Js Remotely . ซึ่งจะเป็นการเปิดแท็บใน Google Chrome ด้วยที่อยู่นี้ https://localhost:8081/debugger-ui/ . นั่นคือการใช้ Chrome devtools แล้วตัวเลือกอื่นล่ะ
การใช้ React-native-debugger
React-native-debugger เป็นเครื่องมือที่ยอดเยี่ยมในการดีบัก React Native code เป็นแอปพลิเคชันเดสก์ท็อปที่ให้ประโยชน์มากมายแก่คุณ มันมาพร้อมกับ Redux devtools และการรวม React-devtools คุณสามารถดีบักสไตล์ได้เช่นกัน จริงๆ แล้วมันเป็นดีบักเกอร์ที่ดีที่สุดสำหรับ React Native และเป็นตัวที่ฉันใช้ โดยปกติแล้วจะพร้อมใช้งานบน MacOS, Windows และ Linux ดูคู่มือการติดตั้งและการรวมระบบ
ฉันคิดว่ามันเพียงพอแล้ว ณ จุดนี้ นี่เป็นส่วนแรกของคู่มือฉบับสมบูรณ์สำหรับการสร้างแอปบนอุปกรณ์เคลื่อนที่ด้วย React Native ในส่วนถัดไป เราจะเจาะลึกถึงเคล็ดลับและปัญหาทางเทคนิคเพิ่มเติม เช่น เราจะใช้องค์ประกอบดั้งเดิมได้อย่างไร, React native API, การรวมเข้ากับไลบรารีอื่น ๆ, Redux , GraphQL และอะไรทำนองนั้น ดังนั้นสมัครรับรายชื่ออีเมลนี้เพื่อติดตามเมื่อตอนต่อไปออกมา ขอขอบคุณสำหรับเวลาของคุณ. ?
คุณสามารถหาฉันบน Twitter ได้ตลอดเวลา ?
