เริ่มโปรเจกต์ React Native Expo ของคุณโดยใช้เทมเพลตที่สร้างไว้ล่วงหน้า

9 นาที

บทนำ ในส่วนนี้ คุณจะได้เรียนรู้วิธีเริ่มต้นกับ react native โดยใช้ expo เทมเพลตและวิธีเชื่อมต่อกับ back4app ใน 4 ขั้นตอนง่ายๆ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป backend back4app หมายเหตุ ติดตาม บทเรียนการสร้างแอป parse ใหม่ https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีสร้างแอป parse บน back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm หรือ yarn https //classic yarnpkg com/en/docs/install ติดตั้งในระบบของคุณ ติดตั้ง expo cli ตาม คู่มือนี้ https //docs expo io/get started/installation/?redirected 1 รับเทมเพลต ในการรับโปรเจกต์เทมเพลต ดาวน์โหลดและแตกไฟล์ซอร์สโค้ดที่ ที่เก็บ github ของเรา https //github com/templates back4app/react native template ลงในเครื่องของคุณหรือโคลนโปรเจกต์ด้วยคำสั่ง git รันคำสั่งต่อไปนี้เพื่อดาวน์โหลดและแตกไฟล์เทมเพลตโดยใช้ curl curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip หรือ เรียกใช้คำสั่งต่อไปนี้เพื่อโคลนเทมเพลตโดยใช้ git git clone https //github com/templates back4app/react native template 2 ดาวน์โหลดการพึ่งพาของแอป ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง \npm\ หรือ \yarn\ ในระบบของคุณ ดูที่ get npm https //docs npmjs com/getting started หรือ get yarn https //classic yarnpkg com/en/docs/install#windows stable คู่มือสำหรับข้อมูลเพิ่มเติม 2\ ในเทอร์มินัลของคุณ ให้เรียกใช้ \cd react native template master\ และเปิดไดเรกทอรีรากของโปรเจกต์ 3\ เรียกใช้ \npm install\ เพื่อติดตั้งการพึ่งพา ในบทแนะนำนี้ เรากำลังใช้ npm เพื่อจัดการการพึ่งพา แต่คุณสามารถใช้ yarn แทนได้ 3 ตั้งค่าข้อมูลรับรองของแอป เพื่อให้แอปเชื่อมต่อกับเซิร์ฟเวอร์ back4app ได้อย่างปลอดภัย คุณต้องให้ parse javascript sdk ข้อมูลรับรองของแอป ค้นหาข้อมูลรับรอง \app id\ และ \javascript key\ โดยไปที่ \dashboard\ > \การตั้งค่าแอป\ > \ความปลอดภัย \& คีย์\ ในไดเรกทอรีรากของโปรเจกต์ ให้เปิดไฟล์ที่ \app/(tabs)/index tsx\ ไฟล์ควรมีลักษณะดังนี้ index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; คัดลอกและวาง \app id\ และ \javascript key\ ของคุณลงในนั้น 4 ทดสอบการเชื่อมต่อของคุณ ภายใน \app js\ ของโปรเจกต์เทมเพลตของคุณ มีฟังก์ชันที่สร้างวัตถุ person และอีกฟังก์ชันสำหรับดึง people ของแอปของคุณไปยังฐานข้อมูล back4app ของคุณ index tsx // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } เพื่อรันและทดสอบการเชื่อมต่อแอปของคุณ เปิดเทอร์มินัลของโปรเจกต์ของคุณ รัน \npm run android\ หรือ \npm run ios\ หรือ \npm run start\ เพื่อเปิดแอปพลิเคชันบนแพลตฟอร์มที่คุณต้องการ เสร็จสิ้น! ในจุดนี้ คุณได้เรียนรู้วิธีการเริ่มต้นและรันแอปพลิเคชัน react native ที่เชื่อมต่อกับ back4app