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 https //www back4app com/docs/get started/new parse app , um zu lernen, wie man eine parse app auf back4app erstellt https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm oder https //classic yarnpkg com/en/docs/install auf ihrem system installiert expo cli installiert, indem sie https //docs expo io/get started/installation/?redirected folgen 1 holen sie sich das template um das template projekt zu erhalten, laden sie den quellcode von unserem https //github com/templates back4app/react native template 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 curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip oder führen sie den folgenden befehl aus, um die vorlage mit git zu klonen git clone https //github com/templates back4app/react native template 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 https //docs npmjs com/getting started oder https //classic yarnpkg com/en/docs/install#windows stable 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