React-Native Tutorial: Snapchat Clone

I den här tutorialen kommer vi att bygga en enkel Snapchat-klon. Detta exempel imiterar de tidigaste versionerna av Snapchat snarare än den mer robusta versionen idag som har "berättelser" och förstärkta verklighetsfunktioner. Denna handledning kommer att vara närmare Snapchat circa 2013.

Denna handledning görs på en Mac och kommer att ha Mac-genvägar med cmd-tangenten. Terminalkoden betecknas med en enda rad som börjar med $.

Del 1: Ställa in en miljö och en gemensam katalog

Kontrollera först att du har React-Native cli installerat globalt:

$ npm i -g react-native-cli

Vid inspelningstillfället är cli-versionen 2.0.1 och React-Native-versionen 0.48.3

Nu ska vi skapa ett nytt projekt:

$ react-native init snapchatClone

Du behöver också Node installerat. Kontrollera om du har installerat det:

$ nod -v

Vid inspelningstillfället är den aktuella versionen 6.11.3, men 6.10.3 används - antingen fungerar.

Byt nu katalogen till ditt projekt:

$ cd snapchatClone

Kör $ npm installation.

Kör sedan $ react-native start. Kör detta för både iOS och Android. Det är en bakgrundsbuntaruppgift som tar hand om en hel del saker bakom kulisserna som att binda din kod, ladda dina filer och få den att köras för Native. Låt detta köras i sin egen terminalflik.

På din andra flik, för iOS: kör $ react-native run-ios (bör ta några minuter första gången). Emulatorn bör dyka upp medan detta kommando körs.

För Android krävs ett ytterligare steg. Ändra din katalog och lägg till en fil:

$ cd android $ touch local.properties

I den nya local.properties-filen lägger du till en pekarreferens för var din Android sdk lagras genom att skriva sdk.dir = / Users / your_username_here / Library / Android / sdk. Spara din fil.

Inom Android Studio, Virtual Device Manager, bör du ha laddat ned din API: n för enheten. Starta Android Emulator genom att klicka på den gröna uppspelningsknappen till vänster om raden.

Nu, när din emulator redan är öppen (detta kommer att orsaka en krasch annars) kör $ react-native run-android i Terminal.

Slå på "Hot Reloading" genom att skriva cmd + D (iOS) cmd + M (Android) i ditt emulatorfönster och välja alternativet. Detta kommer att ladda emulatorn igen med varje sparande (en viktig försäljningsplats för React-Native-plattformen). Ibland fungerar den här funktionen inte perfekt, om du inte får det resultat du tycker du borde vara, kan du försöka tvinga omladdningen med cmd + R innan du kontrollerar om kodfel är fel.

Leta upp filen index.ios.js eller index.android.js i ditt projekt. Varje gång React-Native startar ser den efter dessa indexfiler som startpunkt. Vi kan utveckla för en gemensam komponent i båda dessa filer för att undvika att kopiera kod för båda plattformarna.

Låt oss skapa en källkatalog på en tredje flik Terminal, flytta sedan in i den och skapa en fil som heter App.js - se till att din nuvarande katalog är roten till ditt projekt.

$ mkdir src $ cd src $ touch App.js

Så här startar alla komponenter i React. Importera reaktion och komponent. Din nya komponent, App, kommer att utöka komponenten. Då behöver du en render () -funktion och en retur.

Nu ska vi bara klippa och klistra in stilar från våra "index" -filer. I antingen index.android.js eller index.ios.js (samma stilarkkod för båda) ska du hitta koden nedan och klistra in den under din app-klass i App.js. Radera duplikatkoden i indexfilen som du inte klippte från.

Dessutom kommer vi att klippa och klistra in koden nedan från endera indexfilen (igen, ta bort koden i vilken fil du inte klippte från). Ta också bort StyleSheet, Text och View från att importeras i "index" -filerna (lämnar bara AppRegistry).

Du kommer att märka många kapslade taggar - det beror på att React kräver minst en överordnad tagg för varje element.

Vi kommer att ta bort andra textmeddelanden än “Välkommen till React”.

Importera app i båda indexfilerna och lägg till en tagg i din render () -funktion.

Nu har vi en gemensam katalog för att göra vår källautveckling, vilket eliminerar våra bekymmer för att kopiera kod för både iOS och Android.

Del 2: Implementera en rubrik och en lista över meddelanden

Nu skapar vi en lista med meddelanden. Först kommer vi att göra detta lokalt. Efteråt kan vi flytta den till en server så att listan kan delas med kontakter och andra funktioner som radering vid visning kan implementeras.

Eftersom React och Javascript är så flexibla är det lätt att utveckla dåliga praxis eller få problem genom att skicka saker fram och tillbaka. De flesta människor i React-Native-gruppen tillverkar tre typer av komponenter: presentations-, container- och layoutkomponenter.

Se till att du befinner dig i din källkatalog inom terminalen. Skapa sedan en komponentkatalog, flytta till den och skapa ytterligare tre kataloger: containrar, layout och presentation.

$ mkdir-komponenter $ cd-komponenter $ mkdir containrar layoutpresentation

Byt till din nya layoutkatalog och skapa två filer: index.js och Home.js.

$ cd-layout $ touch index.js Home.js

Importera och exportera nu i din index.js-fil.

Vad detta tillåter oss att göra, till exempel inom index.ios.js, är att importera App från en direkt filreferens. Men nu när vi vill importera kan vi bara referera till själva katalogen snarare än till filen. Så om vi måste importera femton komponenter, istället för att ha 15 rader med import från olika filer i en katalog, kan vi nu bara ha en rad.

Öppna din Home.js-fil, som kommer att vara en standardreaktionskomponent, och skapa din standard renderingsfunktion.

Nu flyttar vi allt i App.js till Home.js och importerar Hem inom App.js. Vi tar bort vår import av Text och StyleSheet samt instruktionsblocket i vårt formatmall. Nedan visas App.js och Home.js efter ändringarna.

Se till att spara dina filer. App.js är din rotkatalog nu. Vi har precis gjort basarbetet för resten av vårt projekt. Nu kommer vi att skapa en rubrikkomponent i Home.js.

Flytta till din presentationsmapp i Terminal och skapa en index.js och Header.js-fil.

$ cd ../presentation $ touch index.js Header.js

Inom index.js, importera och exportera Header.

Inom Header.js konfigurerar du din standardreaktionskomponent, importerar Visa, Text, StyleSheet.

Importera och renderHeader nu inom Home.js.

Det finns två sätt komponenter kan ta emot attribut: tillstånd (som vanligtvis finns i komponenten) och prop (vanligtvis skickas in eller skickas till en annan komponent av din komponent). Vi ger Header en textrekvisita med färg. Nedan visar bara den ändrade koden för renderfunktionen inom Home.js.

Tillbaka i Header.js kommer vi att använda komponentenDidMount livscykelmetod. Detta kallas bara en gång när komponenten monteras. Att ladda om vår emulator bör ge oss en varning med texten prop.

Vi kan ta bort componentDidMount-livscykeln, referera till rekvisittexten inom renderingen av Header och skapa ett StyleSheet. Vi kommer att ändra bakgrundsfärgen på texten "Alla meddelanden" och flytta den upp till toppen av skärmen med lite stoppning från statusfältet. Vi kan också justera bredden och stoppningen nedan för att skapa en rubrik som Snapchat's. Vi måste importera StatusBar och ändra barStyle till ljus så att den dyker upp mot vår bakgrundsfärg.

Nu tar vi bort "Välkommen ..." -texten i Home.js som förberedelse för vår nya meddelandebehållare och lägger till en ny import också. Koden nedan exkluderar StyleSheet-koden i filen som förblir oförändrad.

I terminalen navigerar du till containerkatalogen och skapar index.js och Messages.js.

$ cd ../containers $ touch index.js Messages.js

Inom index.js, skriv vanlig import och export och konfigurera Messages.js som en standardkomponent tillsammans med View, StyleSheet, Text, FlatList, TouchableOpacity import.

Låt oss nu skapa ett regelbundet antal meddelanden och sedan flytta dem till servern efter att vi har fått allt konfigurerat och fungerat. Vi kommer att använda konstruktörmetoden () i React-klassen. Det är viktigt att notera att varje React-komponent har sin egen lokala stat. En viktig aspekt av React är att varje vy är deterministisk och håller reda på sina egna värden - särskilt dess lokala tillstånd. Vi skapar ett tillståndsobjekt myObj: 0. Ändra vår rendering från en vy till TouchableOpacity-tagg med vårt objekt som text. Vi kan också implementera en add () -metod för att öka värdet på objektet när vi ”berör” det.

Detta visar hur vår renderfunktion refererar till ett objekt som har sin egen deterministiska syn och beslutar att det måste återges när det rörs. Dessutom vet den att bara återge en viss del av skärmen, vilket ökar prestandan. När vi rör oss kommer vår renderfunktion att innehålla en lista över meddelanden vi vill återge och hur vi vill återge dem. Då är det bara vår konstruktör som handlar om de faktiska meddelandedata som senare kommer att ändras och hämtas från servern.

Vi kan ta bort myObj-objektet, lägga till () -funktionen och berörbar text eftersom det bara var ett exempel. Ställ in en rad meddelanden i konstruktören. Använd en FlatList-tagg i renderfunktionen, lägg till ett renderItem med ett funktionssamtal, ange hur vi vill att objektet ska återges. Funktionen som den anropar är funktionen _renderMessage (artikel). Förutom renderItem behöver vi en datakälla. Först skickar vi statiska data för att kontrollera att koden fungerar och sedan gå vidare till dynamisk data.

Ta bort det statiska meddelandet inom _renderMessage (artikel) och ersätt det med en dynamisk implementering. Vi måste lägga till en stil till vår render () -funktion och skapa ett formatmall nedan.

I Header.js kan vi justera vårt stilark lite och ge rubriken en toppmarginal inom Home.js så att meddelandena visas under rubriken. (Nedan visas bara den ändrade koden i varje fil.)

Det finns bättre sätt att hantera detta med Flexbox, men det här huvudsakliga fokuset är inte styling, så det vi har är bra för nu (senare tutorials kan komma att fördjupa sig med Flexbox).

För närvarande är meddelandelådorna centrerade / storlekade enligt de största elementen, men vi vill att varje meddelande ska ta upp skärmbredden. Inom Home.js kan vi ge skärmbredden till meddelandevisningstaggen och bli av med vår centrering i formatmallen.

I Messages.js lägger du till en inline-stil i visningstaggen tillsammans med att lägga till en meddelandestil på formatmallen. Lägg sedan till en inline-stilgrupp i texttaggen inom _renderMessage (artikel). Ange polstring på toppen och botten av 5 i matrisen och anpassad text som vi anger i vårt formatmall efter meddelandeText.

VirtualizedList-varningen längst ner på emulatorn orsakas av att React behöver en nyckel för varje listelement. Vi kan fixa detta genom att implementera prop keyExtractor i vår FlatList-rendering. (Nedan är bara den ändrade render () -funktionen för Messages.js)

I nästa del av tutorialen kommer vi att hämta meddelanden från servern, vilket ger oss möjligheten att öppna och ta bort meddelanden lokalt.