Accentsconagua
Share
In deze serie leert u hoe u React Native gebruikt om paginalay-outs te maken die vaak worden gebruikt in mobiele apps. De lay-outs die je gaat maken, zullen niet functioneel zijn, in plaats daarvan is de belangrijkste focus van deze serie om je handen vuil te maken bij het leggen van inhoud in je React Native apps.
Als je nog onbekend bent met het uitbrengen van React Native-apps of styling in het algemeen, bekijk dan mijn vorige tutorial:
Om deze reeks te volgen, daag ik je uit om eerst zelf elk scherm opnieuw te maken voordat je mijn stapsgewijze instructies in de zelfstudie leest. Je zult niet echt veel baat hebben bij deze tutorial door het te lezen! Probeer eerst eerst de antwoorden op te zoeken. Als het je lukt om het op het originele scherm te laten lijken, vergelijk je je implementatie met de mijne. Bepaal dan zelf welke beter is!
In dit tweede deel van de serie maakt u de volgende kalenderpagina:
Agenda-apps worden gebruikt om gebeurtenissen en afspraken bij te houden die door de gebruiker zijn toegevoegd. Je zult verschillende variaties in de natuur vinden, maar de meeste zullen dezelfde elementen hebben als een fysieke kalender: de huidige maand en het huidige jaar, de dagen in de maand en de evenementen of afspraken die door de gebruiker zijn toegevoegd.
Hier zijn een paar voorbeelden van dit type lay-out:
De eerste stap is natuurlijk om een nieuw React Native-project op te zetten:
react-native init react-native-common-screens
Zodra het project is ingesteld, opent u de index.android.js bestand en vervang de standaardcode door het volgende:
import Reageren, Component uit 'reageren'; importeer AppRegistry van 'react native'; agenda importeren uit './src/pages/Calendar'; export standaardklasse ReactNativeCommonScreens verlengt Component render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Maak een src / pages map en maak een Calendar.js bestand erin.
Je hebt ook de reactie-natief-vector-icons pakket. Dit wordt specifiek gebruikt voor de navigatiepictogrammen en andere pictogrammen die op de pagina nodig zijn.
npm install - save-native-vector-pictogrammen opslaan
Open de android / app / build.gradle bestand en voeg een referentie toe aan het pakket:
afhankelijkheden // rest van de afhankelijkheden bevinden zich hier in het bovenste compileerproject (': react-native-vector-icons') // voeg dit toeDoe hetzelfde met de android / settings.gradle bestand door het volgende onderaan toe te voegen:
include ': react-native-vector-icons' project (': react-native-vector-icons'). projectDir = nieuw bestand (rootProject.projectDir, '... / node_modules / react-native-vector-icons / android')Open android / app / src / main / java / com / reactie-native-common-schermen / MainApplication.java en importeer het pakket:
import java.util.Arrays; importeer java.util.List; import com.oblador.vectoricons.VectorIconsPackage; //Voeg dit toe
Ten slotte, initialiseer het pakket:
@Override beschermde lijstgetPackages () Arrays retourneren. asList (nieuw MainReactPackage (), nieuw VectorIconsPackage () // dit toevoegen);
Oké, nu je hebt geprobeerd de lay-out zelf te coderen (geen valsspelen, toch?), Laat ik je zien hoe ik mijn implementatie heb gebouwd.
Eerst dacht ik dat dit de moeilijkste zou zijn om te implementeren, maar geloof me, het is echt niet zo ingewikkeld zolang je de basiskennis al kent. Hier zijn een aantal mogelijkheden om JavaScript-code te gebruiken om te helpen bij het renderen.
Begin met het opnemen van alle componenten en pakketten die u nodig hebt:
import Reageren, Component uit 'reageren'; import StyleSheet, Text, View, ScrollView van 'react native'; importeer icoon uit 'react-native-vector-icons / FontAwesome'; importeer bereik van 'lodash'; import Knop van '... / components / Button';
Deze keer is er een nieuw pakket dat je nog niet hebt geïnstalleerd en dat is lodash. Je hebt niet echt de hele bibliotheek van de lodash nodig, alleen de reeks functie. Dit wordt gebruikt voor het genereren van een reeks getallen op basis van een specifiek bereik. U kunt alleen deze functie installeren door het uit te voeren npm install - sla lodash.range op op uw terminal.
Voeg de standaardcode voor het aanmaken van pagina's toe:
standaardklasse exporteren Kalender breidt component render () return (terug) uit... ); const styles = StyleSheet.create (container: flex: 1);
De kop bevat drie elementen: de knop om terug te gaan naar de vorige pagina, de titel van de huidige pagina en de tekst met een mensvriendelijke weergave van de momenteel geselecteerde datum.
Kalender Vandaag
hoofd heeft een flexDirection van rij zodat elk header_item is horizontaal gestapeld. Hetzelfde buigen de waarde wordt aan elk van hen toegewezen, zodat ze evenveel ruimte innemen. text_center en text_right worden gebruikt om de tekst daarbinnen uit te lijnen header_items naar het midden en naar rechts. Dit gebeurt omdat ze standaard op de meest linkse zijde van hun container zijn uitgelijnd.
header: backgroundColor: '# 329BCB', flexDirection: 'row', padding: 20, header_item: flex: 1, header_button: flexDirection: 'row', text_center: textAlign: 'center', text_right : textAlign: 'right', header_text: color: '#fff', fontSize: 20, bold_text: fontWeight: 'bold',
Zodra de stijlen zijn toegevoegd, ziet het er nu als volgt uit:
De volgende is de eigenlijke kalender, die is verdeeld in drie delen: de kop, de dagen van de week en de kalenderdagen:
... ... ...
Met de kalenderkop kan de gebruiker het jaar en de maand wijzigen.
Er zijn op zijn minst twee manieren om dit te implementeren. De eerste methode is om elk element als een enkel item te behandelen en toe te passen justifyContent: 'ruimte-tussen' naar de container. De tweede methode is om alle elementen te groeperen die met het jaar te maken hebben en die groeperen die met de maand te maken hebben.
De tweede methode is de methode die hieronder wordt toegepast. Semantisch gezien is dit logischer omdat de knop om een jaar terug te navigeren, het jaar zelf en de knop om vooruit te navigeren allemaal gerelateerd zijn, dus u kunt ze als één ding behandelen door ze in dezelfde container te plaatsen. Hetzelfde geldt voor de maandbedieningen.
2013 november
Van daaruit kunt u dezelfde techniek toepassen op die twee groepen componenten in dezelfde regel. Om spaties toe te voegen tussen de twee knoppen (terug en vooruit) en het label, gebruiken we justifyContent: 'ruimte-tussen'. We gebruiken alignItems: 'center' om alle elementen erin naar het midden te duwen. Ten slotte voegen we links en rechts opvulling toe om meer ruimte tussen de twee groepen toe te voegen.
calendar_header: flexDirection: 'row', calendar_header_item: flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, paddingRight: 40, paddingLeft: 40, calendar_header_text: fontWeight: 'bold', fontSize: 20,
Volgende zijn de weekdagen. We gebruiken een functie om deze te renderen omdat het het beste is om een JavaScript-code te gebruiken om alle elementen te renderen.
this.renderWeekDays ()
Dus in plaats van zeven Uitzicht of Tekst componenten die elke dag van de week weergeven, kunt u gewoon een array hebben met de dagen van de week. U kunt dan door die dagen heengaan met behulp van de Array.map () functie. Geef voor elke iteratie een Tekst component dat de dag laat zien.
renderWeekDays () laat weekdagen = ['zon', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; return weekdays.map ((day) => return (Day.toUpperCase () ); );
Merk op dat in de bovenstaande code de toUpperCase () functie wordt gebruikt om alle letters van elke dag naar hoofdletters om te zetten. React Native komt niet met de text-transform CSS-eigenschap, dus dit is de enige manier om hoofdletters te krijgen, afgezien van het handmatig gebruiken van hoofdletters.
Dit is de stijl voor de kalenderkop:
calendar_weekdays_text: flex: 1, color: '# C0C0C0', textAlign: 'center',
De kalenderdagen gebruiken ook een functie voor het renderen van de dagen:
this.renderWeeks ()
De renderWeeks () functie gebruikt de range () functie in lodash om een array te genereren met de dagen van de laatste maand en de dagen van de huidige maand. Die twee matrices worden vervolgens samengevoegd.
U kunt de resulterende array echter niet rechtstreeks gebruiken als gegevensbron voor de kalenderdagen. Dat komt omdat als je gewoon door de items loopt en output a Tekst component voor elke dag, zal er geen onderscheid tussen elke week zijn. Je weet al dat je elke kalenderdag inline moet aanmelden flexDirection: 'rij' naar de container. Als u het op een enkele container toepast, zou dit ertoe leiden dat alle kalenderdagen op één regel staan.
Dit betekent dat u voor elke week een afzonderlijke container nodig heeft. De vraag is hoe. Nogmaals, er zijn minstens twee manieren om dit te bereiken.
De eerste methode is om een variabele op te slaan hoeveel dagen momenteel worden uitgevoerd en vervolgens een voorwaardelijke instructie toe te voegen die een opening zal weergeven 0 en een afsluiting elke keer dat het is 7. Zodra het is 7, reset het terug naar 0. Dit is de meest eenvoudige methode.
Maar ik zal hier een andere methode gebruiken. Onder de getWeeksArray () functie wordt gebruikt om het te implementeren. Deze functie accepteert de reeks dagen en groepeert deze in arrays die elk zeven dagen bevatten. Van daaruit kunt u door elk van die arrays lopen om de weekcontainer weer te geven. Vervolgens doorloop je voor elke iteratie opnieuw de dagen in de week om de dagen weer te geven. Dit is wat de renderDays () functie doet.
renderWeeks () let past_month_days = range (27, 31); laat this_month_days = bereik (1, 30); let days = past_month_days.concat (past_month_days, this_month_days); laat grouped_days = this.getWeeksArray (dagen); return grouped_days.map ((weekdagen, index) => return (this.renderDays (week_days) ); );
Hier is de getWeeksArray () functie:
getWeeksArray (dagen) var weeks_r = []; var seven_days = []; var count = 0; days.forEach ((dag) => count + = 1; seven_days.push (day); if (count == 7) weeks_r.push (seven_days) count = 0; seven_days = [];); terugkeer weken_r;
En hier is de renderDays () functie:
renderDays (week_dagen) return week_days.map ((day, index) => return ( ); );
Voeg de styling toe voor elke week (doordeweekse dagen) en dag (dag en day_text):
weekdagen: flexDirection: 'rij', dag: flex: 1, backgroundColor: '# F5F5F5', opvulling: 17, marge: 2, day_text: textAlign: 'center', color: '# A9A9A9', fontSize : 25,
Volgende is de notitie die door de gebruiker is toegevoegd voor de momenteel geselecteerde dag en de geselecteerde datum en tijd. Nogmaals, het is beter om elementen te groeperen op basis van hun doel in plaats van hoe ze op de pagina worden geplaatst. Zeker al deze elementen zijn gerelateerd, dus we zullen ze in dezelfde container plaatsen. Maar als u beter kijkt, begint u te zien dat u ze verder kunt groeperen: de eigenlijke notitie en de geselecteerde datum. Met dat in gedachten, hier is de markup waar je uiteindelijk mee eindigt:
Met mijn fiets door de buurt rijden. 8:23 PM 14 DONDERDAG
De geselecteerde datum neemt minder ruimte in beslag dan de notitie, dus je moet een grotere toepassen buigen waarde voor de notities. flex: 3 en flex: 1 worden in dit geval gebruikt, wat betekent dat de noten 3/4 van de beschikbare ruimte innemen en dat de geselecteerde datum 1/4 is. U kunt ook decimalen gebruiken (0.75 en 0.25) als dat logischer is voor jou. Wat belangrijk is, is een standaard kiezen en eraan vasthouden. alignItems: 'flex-end' wordt gebruikt op notes_selected_date zodat al zijn kinderen op één lijn worden gebracht met het recht. Dit is nodig omdat ze standaard links zijn uitgelijnd.
opmerkingen: marginTop: 10, opvulling: 20, borderColor: '# F5F5F5', borderTopWidth: 1, borderBottomWidth: 1, flexDirection: 'row', backgroundColor: '#FAFAFA', notes_notes: flex: 3, notes_text: fontSize: 18, notes_selected_date: flex: 1, alignItems: 'flex-end', flexDirection: 'column', small_text: fontSize: 15, big_text: fontSize: 50, fontWeight: 'bold', inline: flexDirection: 'rij',
Ten slotte voegen we de logboeken toe, die erg lijken op die in de vorige zelfstudie, dus ik laat het aan u over om erachter te komen hoe de lay-out is bereikt!
Maak een nieuwe invoer Op donderdag 14 november
Dit zijn de stijlen:
logs: flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', opvulling: 20, borderColor: '# F5F5F5', borderBottomWidth: 1, log_text: fontSize: 25, log_subtext: fontSize: 18
Dat is het! In deze zelfstudie hebt u een agendapagina gemaakt. We hebben een mooie kalenderlay-out voor een app gemaakt en ik heb je laten zien hoe JavaScript-code kan worden gebruikt om een aantal beperkingen van Flexbox te compenseren.
Zoals u hebt gezien, hadden we een manier nodig om het aantal dagen op rij te beperken tot slechts zeven dagen. Flexbox heeft geen manier om dit op te geven, daarom hebben we JavaScript gebruikt om de oorspronkelijke reeks dagen zo te reconstrueren dat ze zijn onderverdeeld in groepen die elk zeven dagen bevatten. Vanaf daar was alles wat we moesten doen om elke groep in een Uitzicht en pas dan toe flexDirection: 'rij' om elk van hen in hun eigen rij weer te geven.
In een volgende zelfstudie leert u hoe u de lay-out gebruikt die gewoonlijk wordt gebruikt in galerijpagina's. Bekijk in de tussentijd enkele van onze andere zelfstudies over React Native en Flexbox.
