Accentsconagua
Share
I denne serien lærer du hvordan du bruker React Native til å lage sidelayouter som ofte brukes i mobilapper. Oppsettene du skal skape, vil ikke være funksjonelle - i stedet er hovedfokuset i denne serien å få hendene dine skitne ved å legge ut innhold i dine React native apps.
Hvis du er ny for å legge ut React native apps eller styling generelt, sjekk ut min tidligere opplæring:
For å følge med denne serien utfordrer jeg deg til å prøve å gjenskape hver skjerm først først, før du leser mine trinnvise instruksjoner i opplæringen. Du vil ikke ha stor nytte av denne opplæringen bare ved å lese den! Prøv først før du ser opp svarene her. Hvis du lykkes med å gjøre det som den opprinnelige skjermen, sammenligner du implementeringen din til min. Deretter bestem deg selv hvilken som er bedre!
I denne andre delen av serien lager du følgende kalenderside:
Kalenderapper brukes til å spore hendelser og avtaler som er lagt til av brukeren. Du finner forskjellige variasjoner i naturen, men de fleste vil ha de samme elementene som en fysisk kalender ville: Gjeldende måned og år, dagene i måneden, og hendelsene eller avtalene lagt til av brukeren.
Her er et par eksempler på denne typen layout:
Det første trinnet er selvfølgelig å sette opp et nytt React Native-prosjekt:
Reager-native init reager-native-common-skjermer
Når prosjektet er satt opp, åpner du index.android.js fil og erstatt standardkoden med følgende:
Import React, Component fra 'reagere'; importer AppRegistry fra 'react-native'; importer kalender fra './src/pages/Calendar'; eksporter standardklasse ReactNativeCommonScreens utvider komponent render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Lage en src / sider mappe og opprett en Calendar.js filen i den.
Du trenger også reagere fremmed-vektor-ikoner pakke. Dette er spesielt brukt for navigasjonsikonene, samt andre ikoner som trengs på siden.
npm installere - lagre reaksjons-native-vektor-ikoner
Åpne android / app / build.gradle fil og legg til en referanse til pakken:
avhengigheter // resten av avhengighetene er her på toppen kompilere prosjektet (': reagere-native-vector-ikoner') // legge til detteGjør det samme med android / settings.gradle fil ved å legge til følgende nederst:
include ': reager-native-vector-icons' prosjektet (': react-native-vector-icons'). projectDir = ny fil (rootProject.projectDir, '... / node_modules / react-native-vector-icons / android')Åpen android / app / src / hoved / Java / COM / reagerer-nativ-felles-skjermer / MainApplication.java og importer pakken:
importer java.util.Arrays; importer java.util.List; importer com.oblador.vectoricons.VectorIconsPackage; //Legg til dette
Til slutt, initialiser pakken:
@Override beskyttet listegetPackages () return Arrays. asList (ny MainReactPackage (), ny VectorIconsPackage () // legg til dette);
Ok, nå som du har forsøkt å kodes selve oppsettet (ikke fusk, ikke sant?), Vil jeg vise deg hvordan jeg bygget implementeringen min.
Først trodde jeg dette ville være den vanskeligste å implementere, men stol på meg, det er egentlig ikke så komplisert så lenge du allerede vet grunnleggende. Det er et par muligheter her for å bruke JavaScript-kode for å hjelpe med gjengivelsen.
Begynn med å inkludere alle komponenter og pakker som du trenger:
Import React, Component fra 'reagere'; importer StyleSheet, Text, View, ScrollView fra 'react-native'; importer ikonet fra 'reagere-native-vector-icons / fontAwesome'; importer range fra "lodash"; Importer knapp fra '... / components / Button';
Denne gangen er det en ny pakke som du ikke har installert ennå, og det er loddrett. Du trenger egentlig ikke hele loddbiblioteket, bare område funksjon. Dette brukes til å generere en rekke tall basert på et bestemt område. Du kan installere bare denne funksjonen ved å kjøre npm installere - lagre lodash.range på terminalen din.
Legg til boilerplate-koden for å lage sider:
eksporter standardklasse Kalender utvider komponent render () return (... ); const styles = StyleSheet.create (container: flex: 1);
Overskriften har tre elementer i den: knappen for å gå tilbake til forrige side, tittelen på gjeldende side og teksten som viser en brukervennlig representasjon av den valgte dato.
Kalender I dag
Overskrift har en flexDirection av rad slik at hver header_item er stablet horisontalt. Det samme flex verdien tildeles hver av dem slik at de forbruker like store mengder plass. text_center og text_right brukes til å justere teksten på innsiden av dem header_items til sentrum og høyre. Dette gjøres fordi de som standard er justert på venstre side av beholderen.
header: backgroundColor: '# 329BCB', flexDirection: 'rad', polstring: 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',
Når stilene er lagt til, bør det nå se slik ut:
Neste er den faktiske kalenderen, som er delt inn i tre deler: toppteksten, ukedagene og kalenderdager:
... ... ...
Kalenderen header tillater brukeren å endre år og måned.
Det er minst to måter dette kan implementeres på. Den første metoden er å behandle hvert element som et enkelt element og søke justifyContent: 'mellomrom mellom' til sin beholder. Den andre metoden er å gruppere alle elementene som har å gjøre med året og gruppere de som har å gjøre med måneden.
Den andre metoden er den som er brukt nedenfor. Semantisk sett er dette mye mer fornuftig fordi knappen for å navigere tilbake et år, selve året og knappen for å navigere fremover er relaterte, slik at du kan behandle dem som en ting ved å sette dem i samme beholder. Det samme gjelder for månedskontrollene.
2013 november
Derfra kan du bruke samme teknikk til de to komponentgruppene i samme linje. For å legge mellom mellomrom mellom de to knappene (tilbake og fremover) og etiketten, bruker vi justifyContent: 'mellomrom mellom'. Vi bruker alignItems: 'center' å pusse alle elementene inne i det mot midten. Til slutt legger vi til venstre og høyre polstring for å legge til mer plass mellom de to gruppene.
calendar_header: flexDirection: 'row', calendar_header_item: flex: 1, flexDirection: 'row', justifyContent: 'mellomrom', alignItems: 'center', paddingTop: 20, paddingRight: 40, paddingLeft: 40 calendar_header_text: fontWeight: 'bold', fontSize: 20,
Neste er hverdager. Vi bruker en funksjon for å gjengi disse fordi det er best å bruke noen JavaScript-kode for å gjengi alle elementene.
this.renderWeekDays ()
Så i stedet for å ha syv Utsikt eller Tekst komponenter som gjengir hver dag i uken, kan du bare ha en matrise som inneholder ukedagene. Du kan deretter iterere gjennom de dagene ved hjelp av Array.map () funksjon. For hver iterasjon, gjeng a Tekst komponent som viser dagen.
renderWeekDays () la weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; returnere hverdager.map ((dag) => retur (Day.toUpperCase () ); );
Legg merke til at i koden ovenfor, toUpperCase () funksjonen brukes til å konvertere alle bokstavene i hver dag til store bokstaver. React Native kommer ikke med text-transform CSS-egenskap, så dette er den eneste måten å oppnå store bokstaver bortsett fra manuelt bruk av store bokstaver.
Her er styling for kalenderoverskriften:
calendar_weekdays_text: flex: 1, color: '# C0C0C0', textAlign: 'center',
Kalenderdagen bruker også en funksjon for gjengivelse av dagene:
this.renderWeeks ()
De renderWeeks () funksjonen bruker område() Funger i loddrett for å generere en matrise som inneholder dagene fra den siste måneden og dagene i den nåværende måneden. Disse to arrays blir deretter fusjonert sammen.
Du kan imidlertid ikke direkte bruke den resulterende arrayen som datakilde for kalenderdager. Det er fordi hvis du bare slår gjennom elementene og skriver ut a Tekst komponent for hver dag, vil det ikke være noen forskjell mellom hver uke. Du vet allerede at for å gjøre hver kalenderdag inline, må du søke flexDirection: 'rad' til sin beholder. Så å bruke det på en enkelt container vil føre til at alle kalenderdager er plassert i en enkelt linje.
Dette betyr at du må ha en separat beholder for hver uke. Spørsmålet er hvordan. Igjen er det minst to måter å oppnå dette på.
Den første metoden er å ha en variabel butikk hvor mange dager som er utgått, og legg deretter til en betinget erklæring som vil gi en åpning 0 og en avslutning hver gang det er 7. Når det er 7, tilbakestill den tilbake til 0. Dette er den mest enkle metoden.
Men jeg bruker en annen metode her. Under getWeeksArray () funksjonen brukes til å implementere den. Denne funksjonen aksepterer mengden dager og grupperer dem i arrays som inneholder syv dager hver. Derfra kan du løse gjennom hver av disse arrays for å gjengi ukebeholderen. Deretter løper du igjen for hver iterasjon gjennom dagene i uken for å gjengi dagene. Dette er hva renderDays () funksjon gjør.
renderWeeks () la past_month_days = range (27, 31); la dette_month_days = rekkevidde (1, 30); la dager = past_month_days.concat (siste_month_days, this_month_days); la grouped_days = this.getWeeksArray (dager); returner grouped_days.map ((week_days, index) => retur (this.renderDays (week_days) ); );
Her er getWeeksArray () funksjon:
getWeeksArray (dager) var weeks_r = []; var seven_days = []; var teller = 0; days.forEach ((dag) => telle + = 1; seven_days.push (dag); hvis (telle == 7) weeks_r.push (seven_days) count = 0; seven_days = [];); returnere weeks_r;
Og her er det renderDays () funksjon:
renderDays (weekdays) return week_days.map ((dag, indeks) => return ( ); );
Legg til stylingen for hver uke (week_days) og dag (dag og day_text):
Week_days: flexDirection: 'row', dag: flex: 1, backgroundColor: '# F5F5F5', polstring: 17, margin: 2, day_text: textAlign: 'center', farge: '# A9A9A9', fontSize : 25,
Neste er notatet lagt til av brukeren for den valgte dagen og den valgte dato og klokkeslett. Igjen er det bedre å gruppere elementer i henhold til deres formål, i stedet for hvordan de er plassert på siden. Sikkert alle disse elementene er relaterte, så vi plasserer dem i samme beholder. Men på en nærmere titt, begynner du å se at du kan gruppere dem videre: selve notatet og den valgte datoen. Med det i tankene, her er det oppslaget du vil ende opp med:
Riding sykkelen rundt nabolaget. 8:23 PM 14 TORSDAG
Den valgte datoen har mindre plass enn notatet, så du må søke større flex verdi til notatene. flex: 3 og flex: 1 brukes i dette tilfellet, noe som betyr at notatene forbruker 3/4 av ledig plass og den valgte datoen bruker 1/4. Du kan også bruke decimaler (0,75 og 0.25) hvis det gir mer mening til deg. Det som er viktig er å velge en standard og holde fast ved den. alignItems: 'flex-end' brukes på notes_selected_date slik at alle sine barn vil bli justert til høyre. Dette er nødvendig fordi de som standard er justert til venstre.
notater: marginTop: 10, polstring: 20, borderColor: '# F5F5F5', borderTopWidth: 1, borderBottomWidth: 1, flexDirection: 'row', backgroundColor: '#FAFAFA', notater_noter: flex: 3, notes_text: fontSize: 18, notes_selected_date: flex: 1, alignItems: 'flex-end', flexDirection: 'kolonne', small_text: fontSize: 15, big_text: fontSize: 50, fontWeight: 'bold', inline: flexDirection: 'row',
Til slutt legger vi til loggene, som er veldig lik de i den forrige opplæringen, så jeg lar deg finne ut hvordan layoutet oppnås!
Opprett ny post Torsdag 14. november
Her er stilene:
logger: flexDirection: 'row', justifyContent: 'mellomrom', alignItems: 'center', polstring: 20, borderColor: '# F5F5F5', borderBottomWidth: 1, log_text: fontSize: 25, log_subtext: fontSize: 18
Det er det! I denne opplæringen har du opprettet en kalenderside. Vi har laget en fin kalenderoppsett for en app, og jeg har vist deg hvordan JavaScript-kode kan brukes til å kompensere for noen av begrensningene til Flexbox.
Som du har sett, trengte vi en måte å begrense antall dager på rad til bare syv dager. Flexbox har ikke mulighet til å spesifisere dette, så vi brukte JavaScript for å rekonstruere det opprinnelige antall dager på en slik måte at de er delt inn i grupper som inneholder syv dager hver. Derfra var alt vi måtte gjøre, å vikle hver gruppe inne i en Utsikt og bruk deretter flexDirection: 'rad' for å gjøre hver av dem gjengitt i sin egen rad.
I en kommende opplæring lærer du hvordan du implementerer layoutet som ofte brukes i gallerisider. I mellomtiden kan du se noen av våre andre opplæringsprogrammer på React Native og Flexbox.
