React Native - การตั้งค่าสภาพแวดล้อม

มีสองสิ่งที่คุณต้องติดตั้งเพื่อตั้งค่าสภาพแวดล้อมสำหรับ React Native เราจะใช้ OSX เป็นแพลตฟอร์มการสร้างของเรา

ซีเนียร์	ซอฟต์แวร์	คำอธิบาย
1	NodeJS และ NPM	คุณสามารถทำตามบทช่วยสอนการตั้งค่าสภาพแวดล้อม NodeJSของเราเพื่อติดตั้ง NodeJS

ขั้นตอนที่ 1: ติดตั้ง create-react-native-app

หลังจากติดตั้ง NodeJS และ NPM ในระบบของคุณเรียบร้อยแล้วคุณสามารถดำเนินการติดตั้ง create-react-native-app (ทั่วโลกตามที่แสดงด้านล่าง)

C:\Users\Tutorialspoint> npm install -g create-react-native-app

ขั้นตอนที่ 2: สร้างโครงการ

เรียกดูโฟลเดอร์ที่ต้องการและสร้างโครงการเนทีฟตอบสนองใหม่ดังที่แสดงด้านล่าง

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

หลังจากดำเนินการคำสั่งข้างต้นโฟลเดอร์ที่ระบุชื่อจะถูกสร้างขึ้นพร้อมกับเนื้อหาต่อไปนี้

ขั้นตอนที่ 3: NodeJS Python Jdk8

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Python NodeJS และ jdk8 ในระบบของคุณแล้วหากไม่มีให้ติดตั้ง นอกจากนี้ขอแนะนำให้ติดตั้งเส้นด้ายเวอร์ชันล่าสุดเพื่อหลีกเลี่ยงปัญหาบางประการ

ขั้นตอนที่ 4: ติดตั้ง React Native CLI

คุณสามารถติดตั้งอินเตอร์เฟสบรรทัดคำสั่ง react native บน npm โดยใช้คำสั่ง install -g react-native-cli ดังที่แสดงด้านล่าง

npm install -g react-native-cli

ขั้นตอนที่ 5: เริ่มตอบสนองดั้งเดิม

ในการตรวจสอบการติดตั้งให้เรียกดูโฟลเดอร์โปรเจ็กต์และลองเริ่มโปรเจ็กต์โดยใช้คำสั่ง start

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

หากทุกอย่างเป็นไปด้วยดีคุณจะได้รับรหัส QR ตามที่แสดงด้านล่าง

ตามคำแนะนำวิธีหนึ่งในการเรียกใช้แอปพลิเคชันตอบสนองบนอุปกรณ์ Android ของคุณคือการใช้งานแสดงสินค้า ติดตั้งไคลเอนต์เอ็กซ์โปใน Android ของคุณและสแกนรหัส QR ที่ได้รับด้านบน

ขั้นตอนที่ 6: นำโครงการออก

หากคุณต้องการเรียกใช้โปรแกรมจำลอง android โดยใช้ android studio ให้ออกจากบรรทัดคำสั่งปัจจุบันโดยกด ctrl+c.

จากนั้นรันรัน eject command เช่น

npm run eject

สิ่งนี้จะแจ้งให้คุณทราบตัวเลือกในการนำออกเลือกตัวเลือกแรกโดยใช้ลูกศรแล้วกด Enter

จากนั้นคุณควรแนะนำชื่อแอปบนหน้าจอหลักและชื่อโปรเจ็กต์ของ Android studio และโปรเจ็กต์ Xcode

แม้ว่าโครงการของคุณจะดำเนินการสำเร็จ แต่คุณอาจได้รับข้อผิดพลาดดังนี้ -

ละเว้นข้อผิดพลาดนี้และเรียกใช้ react native สำหรับ Android โดยใช้คำสั่งต่อไปนี้ -

react-native run-android

แต่ก่อนหน้านั้นคุณต้องติดตั้ง android studio

ขั้นตอนที่ 7: การติดตั้ง Android Studio

เยี่ยมชมหน้าเว็บ https://developer.android.com/studio/ และดาวน์โหลด android studio

หลังจากดาวน์โหลดไฟล์การติดตั้งแล้วให้ดับเบิลคลิกที่ไฟล์และดำเนินการติดตั้ง

ขั้นตอนที่ 8: การกำหนดค่า AVD Manager

ในการกำหนดค่า AVD Manager ให้คลิกที่ไอคอนตามลำดับในแถบเมนู

ขั้นตอนที่ 9: การกำหนดค่า AVD Manager

เลือกข้อกำหนดของอุปกรณ์ Nexus 5X สามารถแนะนำได้

คลิกที่ปุ่มถัดไปคุณจะเห็นหน้าต่าง System Image เลือกไฟล์x86 Images แท็บ

จากนั้นเลือก Marshmallow แล้วคลิกถัดไป

สุดท้ายคลิกที่ปุ่ม Finish เพื่อสิ้นสุดการกำหนดค่า AVD

หลังจากกำหนดค่าอุปกรณ์เสมือนของคุณแล้วให้คลิกที่ปุ่มเล่นใต้คอลัมน์การดำเนินการเพื่อเริ่มโปรแกรมจำลอง Android ของคุณ

ขั้นตอนที่ 10: ใช้ Android

เปิดพรอมต์คำสั่งเรียกดูโฟลเดอร์โครงการของคุณและเรียกใช้ไฟล์ react-native run-android คำสั่ง

จากนั้นการเรียกใช้แอปของคุณจะเริ่มขึ้นในพรอมต์อื่นที่คุณสามารถเห็นสถานะ

ในโปรแกรมจำลอง Android ของคุณคุณสามารถดูการทำงานของแอปเริ่มต้นเป็น -

ขั้นตอนที่ 11: local.properties

เปิด android โฟลเดอร์ในโฟลเดอร์โครงการของคุณ SampleReactNative/android(ในกรณีนี้). สร้างไฟล์ด้วยชื่อlocal.properties และเพิ่มเส้นทางต่อไปนี้ในนั้น

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

ที่นี่แทนที่ Tutorialspoint ด้วยชื่อผู้ใช้ของคุณ

ขั้นตอนที่ 12: Hot Reloading

และในการสร้างแอปพลิเคชั่นแก้ไข App.js และการเปลี่ยนแปลงจะได้รับการอัปเดตโดยอัตโนมัติบนโปรแกรมจำลอง Android

ถ้าไม่มีให้คลิกที่ตัวจำลอง android กด ctrl+m จากนั้นเลือก Enable Hot Reloading ตัวเลือก