Accentsconagua
Share
Velkommen tilbake til denne serien, hvor du lærer å bruke React Native for å lage sidelayouter som ofte brukes i mobilapper. Oppsettene du lager, vil ikke være funksjonelle - i stedet er hovedfokuset i denne serien å få hendene 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 siste opplæringen av serien, vil du opprette følgende nyhetsfeedside:
Nyhetsmatoppsett brukes til å presentere informasjon på en slik måte at den enkelt kan skannes. Mesteparten av tiden presenteres det i et listformat med tittelen, utdraget og eventuelt et forhåndsvisningsbilde som representerer hvert nyhetsart.
Her er et par eksempler på at denne typen layout blir brukt 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 nyheter fra './src/pages/News'; eksporter standardklasse ReactNativeCommonScreens utvider komponent render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Lage en src / sider mappe og opprett en News.js filen i den.
Du trenger også reagere fremmed-vektor-ikoner pakke. Dette brukes spesielt til bakikonet i overskriften.
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?) Jeg skal vise deg hvordan jeg bygde implementeringen min.
Du må ha lagt merke til trenden nå. Jeg har ordnet disse etter vanskeligheter - eller i det minste i henhold til det jeg fant vanskelig! Så denne siste skjermen er i utgangspunktet den store sjefen blant de andre skjermbildene du har laget så langt. Ikke vær så snill, siden jeg fremdeles vil lede deg trinnvis.
Du trenger noen bilder for forhåndsvisning av hvert nyhetsart. Jeg har lagt til noen bilder i repo som du kan bruke hvis du vil.
Start med å legge til boilerplate-koden:
Import React, Component fra 'reagere'; importer StyleSheet, Text, View, ScrollView, Image fra 'react-native'; importer ikonet fra 'reagere-native-vector-icons / fontAwesome'; Importer knapp fra '... / components / Button'; importer NewsItem fra '... / components / NewsItem';
Denne gangen er det en ny komponent som heter NewsItem (src / komponenter / NewsItem). Som navnet antyder, brukes det til å gjengi hvert nyhetsart. Vi kommer tilbake til det senere, men først ta en titt på konstruktør () funksjon. På samme måte som galleriskjermbildet tidligere, bruker dette staten til å lagre datakilden for nyhetsartikler. Titlene og oppsummeringene er fra New York Times, men bildene er fra Google Images (og er merket for gjenbruk av deres respektive eiere).
konstruktør (rekvisitter) super (rekvisitter); this.state = news_items: [pretext: 'Gray Matter', tittel: 'Art Makes You Smart', sammendrag: 'Museumbesøk øker testresultatene, genererer samfunnsansvar og øker forståelsen av kunsten av studenter.' krever ('... /images/pink.jpg'), pretext: ", tittel: 'Spenning og feil før Health Website Crash', sammendrag: 'Intervjuer og dokumenter gir nye detaljer om hvordan utrulling av president Obama \ s signaturprogram ble til en stor ydmykelse. ', image: require (' ... /images/beach.jpg '), pretext: ", tittel: '36 Hours in Charleston, SC', sammendrag: 'Crowds er tynnere og temperaturene er milde om vinteren i dette ... ', bilde: krever (' ... /images/rails.jpg '),]; Innholdet er delt inn i tre deler: overskriften, instruksjonsteksten og nyhetsartikler. Overskriften er veldig lik toppteksten fra kalenderskjermen tidligere; Den eneste forskjellen er at i stedet for tre er det bare to synlige elementer. (Hvis du vil ha en oppdatering på hvordan kalenderskjermen ble gjort, fortsett og les gjennom den opplæringen.)
Jeg sier "synlig" fordi det faktisk er tre elementer - den siste er bare skjult! Dette muliggjør enkel sentrering av teksten i midten. Hvis du bare har to elementer i toppteksten, er det vanskelig å finne ut hvordan du deler rom mellom de to elementene, og fortsatt har den midterste en sentrering. Men hvis du har tre elementer, kan hver og en ha det samme flex verdi, og du kan bare bruke Tekstjustering å plassere tekst eller alignItems å posisjonere Utsikt komponenter.
gjengivelse () retur (); Mest e-postmeldt SWIPE ACROSS SECTION this.renderNews ()
De renderNews () funksjonen er den som løper gjennom alle nyhetene i staten og gjør dem ved hjelp av NewsItem komponent.
renderNews () return this.state.news_items.map ((news, index) => return);
Neste opp er koden for NewsItem komponent. Begynn med å legge til kjeleplaten React-komponentkoden. Som du tidligere har sett, aksepterer denne komponenten nøkkel, index, og nyheter som rekvisitter. Du trenger bare virkelig index og nyheter. nøkkel er bare React Natives måte å unikt identifisere hver rad på en liste. Du må levere det hver gang du bruker Array.map for gjengivelse; Ellers vil det klage.
Når du bruker funksjonelle komponenter, blir rekvisitter passert som et enkelt argument. Nedenfor blir de enkelte rekvisitter hentet ved hjelp av destruktureringsoppgave, så news, index i utgangspunktet trekker ut nyheter og index egenskaper fra rekvisitter. Derfra kan du få nummeret som skal gjengis.
Import React, Component fra 'reagere'; importer StyleSheet, Text, View, Image fra 'react-native'; Importer knapp fra './Button'; const NewsItem = (news, index) => la nummer = (indeks + 1) .toString (); komme tilbake (… );
Hvis du ser på skjermbildet fra tidligere, kan du se at hvert nyhetsartikkel kan deles inn i to grupper: en som viser nyhetsteksten (nummer, tittel og utdrag) og en som viser funksjonsbildet.
Det løser problemet med funksjonen bildet siden det er bare ett element. Men for nyhetsteksten må du fortsatt dele det videre. Som du kanskje har lagt merke til, er nummeret i samme posisjon, selv om tittelen har påskudd (for eksempel "Gray Matter"). Påskuddet har også en annen styling fra tittelen og nummeret.
Ved hjelp av denne kunnskapen kan du utlede at tallet, påskuddsordet og tittelen ikke skal klumpes sammen i en enkelt beholder. Videre ser påskudd, tittel og utdrag ut som om de er vertikalt stablet, slik at du kan sette dem inn i en enkelt beholder. Bare tallet skal hentes ut. Med det kommer du med følgende oppslag:
De getPretext () funksjonen lar deg betinget gjengi a Tekst komponent bare når et nyhetselement har påskudt i det.
funksjon getPretext (nyheter) if (news.pretext) return (News.pretext );
Her er onPress funksjon. Alt det gjør er å varsle nyhetstittelen, men i en ekte app bør dette navigere til selve artikkelen:
funksjon onPress (nyheter) alert (news.title);
På dette tidspunktet vil siden nå se slik ut:
Legg til følgende stiler på Nyhetssiden:
const styles = StyleSheet.create (container: flex: 1, header: flexDirection: 'row', backgroundColor: '#FFF', polstring: 20, justifyContent: 'space-between', borderBottomColor: '# E1E1E1' , borderBottomWidth: 1, header_button: flex: 1, mellomrom: flex: 1, back_button: flexDirection: 'rad', alignItems: 'center', back_button_label: color: '# 397CA9', fontSize : 20,, instruksjon: alignSelf: 'center', marginTop: 5, instruction_text: color: '# A3A3A3', header_text: flex: 1, alignSelf: 'center', header_text_label: fontSize: 20 , textAlign: 'center', news_container: flex: 1, flexDirection: 'column',);
Jeg vil ikke lenger gå deg gjennom hva hver linje av kode gjør siden det i utgangspunktet gjelder de samme konseptene du har lært i de tidligere opplæringene i denne serien. Her ser du hvordan siden ser ut når en gang de ovennevnte stilene er brukt:
Deretter legger du til stilene for hvert nyhetsart. Hver news_item har en flexDirection av rad slik at nyhetsteksten og det kjente bildet er alle på en enkelt linje. news_text opptar to tredjedeler av ledig plass, mens news_photo okkuperer gjenværende plass.
const styles = StyleSheet.create (news_item: flex: 1, flexDirection: 'row', paddingRight: 20, paddingLeft: 20, paddingTop: 30, paddingBottom: 30, borderBottomWidth: 1, borderBottomColor: '# E4E4E4', news_text : flex: 2, flexDirection: 'row', polstring: 10,);
Deretter må du legge til stylingen for å fikse problemet med teksten som overlapper forhåndsvisningsbildet. Du kan gjøre det ved å tildele en flex verdi til barna til news_text. EN flex verdien er allerede tildelt news_text, men siden a Utsikt har blitt brukt inne i det, må du også tilordne en flex verdi til dem slik at de ikke vil gå over grensen til deres foreldre Utsikt.
Vi tilordner en fleksibel verdi på 0.5 til Nummer, samtidig som TEXT_CONTAINER vil ha en verdi på 3. Med disse verdiene, TEXT_CONTAINER vil okkupere seks ganger så mye plass som Nummer.
nummer: flex: 0.5,, text_container: flex: 3,
Nå er alt du trenger å gjøre, å legge til de siste detaljene for å stilte teksten:
påskudd: color: '# 3F3F3F', fontSize: 20, tittel: fontSize: 28, fontWeight: 'fet', farge: '# 000', fontFamily: 'georgia', news_photo: flex: 1, justifyContent : 'senter', alignItems: 'senter', bilde: bredde: 120, høyde: 120
Og ikke glem å eksportere komponenten!
eksporter standard NewsItem;
Det er det! I denne siste delen av denne serien lærte du hvordan du implementerer layoutet som ofte brukes på nyhetssider. Denne opplæringen samlet alle de tingene du har lært i de forrige delene av serien. Du har brukt begge flexDirection: 'rad' og flexDirection: 'kolonne' for å fullføre stilene for hvert nyhetsart. Du brukte også kunnskapen din til å justere bilder for forhåndsvisningsbildet.
Hvis du har forsøkt å implementere disse oppsettene på egen hånd, mislyktes, og deretter prøvd igjen, bør du allerede ha nok ferdigheter til å implementere noen form for layout. Du kan bruke de tingene du har lært her for å implementere selv de komplekse layoutene som du vanligvis ser i populære apper. Hvis du vil ha mer praksis, kan du prøve å gjenopprette layoutene du ser i populære apper som Facebook eller YouTube.
Hvordan sammenlignet min løsning med din egen? Gi oss beskjed i diskusjonsforumet nedenfor. Og i mellomtiden, sjekk ut noen av våre andre opplæringsprogrammer på React Native og Flexbox.
