Starten Sie Ihr React Native Expo-Projekt mit einer vorgefertigten Vorlage

9 min

einführung in diesem abschnitt lernen sie, wie sie mit react native beginnen und es mit einem expo template in 4 einfachen schritten mit back4app verbinden voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine backend back4app app hinweis folgen sie dem tutorial für neue parse apps , um zu lernen, wie man eine parse app auf back4app erstellt npm oder yarn auf ihrem system installiert expo cli installiert, indem sie diesem leitfaden folgen 1 holen sie sich das template um das template projekt zu erhalten, laden sie den quellcode von unserem github repository auf ihren computer herunter und entpacken sie ihn oder klonen sie das projekt mit der git befehlszeile führen sie den folgenden befehl aus, um das template mit curl herunterzuladen und zu extrahieren oder führen sie den folgenden befehl aus, um die vorlage mit git zu klonen 2 laden sie die abhängigkeiten der app herunter stellen sie sicher, dass sie npm npm oder yarn yarn auf ihrem system installiert haben schauen sie sich die npm anleitung oder yarn anleitung für weitere informationen an 2\ führen sie in ihrem terminal cd react native template master cd react native template master aus und öffnen sie das stammverzeichnis des projekts 3\ führen sie npm install npm install aus, um die abhängigkeiten zu installieren in diesem tutorial verwenden wir npm zur verwaltung der abhängigkeiten, aber sie können auch yarn verwenden 3 richten sie die anmeldeinformationen der app ein um der app zu ermöglichen, sich sicher mit den back4app servern zu verbinden, müssen sie dem parse javascript sdk die anmeldeinformationen der app bereitstellen suchen sie ihre app id app id und javascript schlüssel javascript schlüssel anmeldeinformationen, indem sie zu ihrer app dashboard dashboard > app einstellungen app einstellungen > sicherheit & schlüssel sicherheit & schlüssel öffnen sie im stammverzeichnis des projekts die datei unter app/(tabs)/index tsx app/(tabs)/index tsx die datei sollte so aussehen 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/'; kopieren sie ihre app id app id und javascript schlüssel javascript schlüssel und fügen sie sie dort ein 4 testen sie ihre verbindung innerhalb der app js app js deines template projekts gibt es eine funktion, die ein person objekt erstellt, und eine andere, um personen deiner app in deine back4app datenbank abzurufen 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); } } um die verbindung deiner app auszuführen und zu testen öffne das terminal deines projekts führe aus npm run android npm run android oder npm run ios npm run ios oder npm run start npm run start um die anwendung auf deiner zielplattform zu öffnen es ist erledigt! an diesem punkt hast du gelernt, wie man eine react native anwendung, die mit back4app verbunden ist, zum laufen bringt