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 første delen av serien vil du opprette følgende påloggingsside:
Innloggingssiden brukes vanligvis som startside for apper som krever at brukere har en konto.
Her er et par eksempler på denne typen layout i naturen:
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 innlogging fra './src/pages/Login'; eksporter standardklasse ReactNativeCommonScreens utvider komponent render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Lage en src / sider mappe og opprett en Login.js filen i den.
Du trenger også reagere fremmed-vektor-ikoner pakke. Dette er spesielt brukt til å gjøre Facebook-ikonet for Facebook-innloggingsknappen.
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 å kode selve oppsettet (ikke fusk, ikke sant?), Vil jeg vise deg hvordan jeg bygget implementeringen min. Åpne src / sider / Login.js fil og importer de tingene du trenger:
Import React, Component fra 'reagere'; importer StyleSheet, Text, View, TextInput, ScrollView fra 'react-native'; importer ikonet fra 'reagere-native-vector-icons / fontAwesome';
Bortsett fra standard React komponenter og reagere fremmed-vektor-ikoner pakke, må du også inkludere tre egendefinerte komponenter:
Import Container fra '... / komponenter / Container'; Importer knapp fra '... / components / Button'; importer etiketten fra '... / components / Label';
Den første er Container (src / komponenter / Container.js), hvis jobb er å legge til en bunnmargin til hva den bryter inn. Det høres trivielt ut, og ja, du kan faktisk bare bruke Utsikt og legg til de samme stilene hver gang du vil bruke den. Fordelen dette tilbyr er at du ikke trenger å bruke de samme stilene til en Utsikt flere ganger, og det tillater deg også å gjenbruke komponenten hver gang du trenger å legge til en bunnmargin til noe.
Import React, Component fra 'reagere'; importer StyleSheet, View fra 'react-native'; const Container = (rekvisitter) => retur (props.children ); const styles = StyleSheet.create (labelContainer: marginBottom: 20); eksport standard Container;
De Knapp komponent (src / komponenter / Button.js), som navnet antyder, brukes til å lage knapper. Hvis det er til stede, spytter dette ut hvilken som helst barnkomponent som er lagt inn i den. Ellers utsender det a Tekst komponent som viser teksten inne i knappen. En standard stil er også lagt til, men den vil ikke bli brukt hvis noDefaultStyles er tilstede i rekvisitter. Unike knappestiler passert fra rekvisitter er også valgfrie.
Import React, Component fra 'reagere'; importer StyleSheet, Text, TouchableHighlight, fra 'react-native'; const-knapp = (rekvisitter) => funksjon getContent () hvis (props.children) return props.children; komme tilbakeProps.label komme tilbake (getContent () ); const styles = StyleSheet.create (knapp: alignItems: 'center', justifyContent: 'senter', polstring: 20,); Eksporter standard knapp;
Til slutt er det Merkelapp komponent (src / komponenter / Label.js), som i utgangspunktet bare er en Tekst komponent med noen forhåndsdefinert styling.
Import React, Component fra 'reagere'; importer StyleSheet, Text, fra 'react-native'; const Label = (rekvisitter) => retur (Props.text ); const styles = StyleSheet.create (textLabel: fontSize: 20, fontWeight: 'bold', fontFamily: 'Verdana', marginBottom: 10, color: '# 595856'); eksporter standard etikett;
Nå kan du gå videre til selve innloggingssiden. Inne i render () metode, pakk alt i a ScrollView komponent. Dette er svært viktig hvis du vil at appen din skal kunne imøtekomme alle typer enhetsdimensjoner og skjermretninger.
Oftere enn ikke, uansett hvor liten høyde du tror innholdet ditt skal forbruke, vil det alltid være en enhet som ikke vil kunne vise den helt. Dermed behovet for rullefelt for å rulle innholdet.
eksporter standardklasse Innlogging utvider komponent render () return (... );
Deretter skal du initialisere stilene:
const styles = StyleSheet.create ();
Bruk følgende stiler til ScrollView. flexDirection er valgfritt, men det er en god praksis å eksplisitt definere det slik at fremtidige utviklere vil vite nøyaktig hvordan hovedinnholdet i appen er lagt ut bare ved å kaste på koden.
bla: backgroundColor: '# E1D7D8', polstring: 30, flexDirection: 'kolonne',
Ser på skjermbildet fra tidligere, det første innholdet du vil legge til er det aller høyeste, og det er den glemte passordknappen. Legg merke til at onPress rekvisitter leveres fordi underlayColor vil ikke bli brukt hvis det ikke er noen funksjon som leveres når knappen trykkes.
Stilene som brukes til det, er ganske selvforklarende bortsett fra alignSelf: 'flex-end'. Dette forteller React Native å plassere elementet på slutten av den nåværende linjen. alignSelf er ekvivalent av alignItems for å spesifisere justeringen av selve elementet og ikke dets barn. Ved hjelp av flex-end lar deg oppnå en effekt som ligner på flyte: høyre i CSS.
etikett: color: '# 0d8898', fontSize: 20, alignRight: alignSelf: 'flex-end',
Neste er de to tekstfeltene sammen med deres etiketter.
På dette tidspunktet skal siden nå se slik ut:
Her er styling for textInput:
textInput: høyde: 80, fontSize: 30, backgroundColor: '#FFF',
Nå har du kanskje begynt å legge merke til hvorfor Container komponent er viktig. Den lar deg inkapslere standardstiler slik at du ikke ender opp med å deklarere dem i hver fil. Dette er et grunnleggende prinsipp for React: du bør alltid streve for komponentgenbruk hver gang du ser en mulighet.
Knappen for å logge inn på Facebook er litt annerledes enn knappene du opprettet tidligere. Denne gangen har det noe innhold inni det som viser et ikon sammen med litt tekst. Disse legges i stedet for merkelapp rekvisitter for å tilpasse innholdet til knappen videre.
Når det er lagt til, må siden nå se slik ut:
Legg til stilene for Facebook-innloggingsknappen:
gjennomsiktig knapp: marginTop: 30, borderColor: '# 3B5699', borderWidth: 2, buttonBlueText: fontSize: 20, color: '# 3B5699', knappBigText: fontSize: 20, fontWeight: 'bold', inline: flexDirection: 'row',
Det er virkelig ingenting verdt å merke seg her bortsett fra styles.inline, som brukes som en hjelpeklasse for å stable alle elementene inne i den horisontale. Dette oppnår en lignende effekt som bruken av i HTML for å pakke inn tekst som du vil vise inline. I CSS kan dette oppnås med enten skjerm: inline eller skjerm: inline-blokk.
De siste elementene på denne skjermen er Logg inn og Avbryt knapper. De trenger mer plass over dem enn de andre elementene, så det er best å pakke dem i en beholder (bunntekst) og gjelde marginTop til det. Dette gir mer mening enn å erklære en ny stil bare for disse knappene.
Til slutt legger du til stylingen for Logg inn og Avbryt knapper:
buttonWhiteText: fontSize: 20, color: '#FFF',, buttonBlackText: fontSize: 20, color: '# 595856', primærknapp: backgroundColor: '# 34A853', footer: marginTop: 100
Til slutt, ikke glem å definere koden som skal utføres når noen av knappene trykkes!
trykk () // kjør noen kode her
Det er det! I denne opplæringen har du opprettet en innloggingsside ved hjelp av Flexbox-kunnskapen din. Underveis lærte du også hvordan du bruker et tredjepartsbibliotek som heter React Native Vector Icons for å enkelt legge til ikoner i appen din. Hvordan sammenlignet min løsning med din egen? Gi oss beskjed i diskusjonsforumet nedenfor.
I neste veiledning i denne serien lærer du hvordan du lager en kalenderskjerm. I mellomtiden kan du se noen av våre andre opplæringsprogrammer på React Native og Flexbox.
