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 u maakt, zullen niet functioneel zijn, maar in deze serie ligt de nadruk vooral op het vies maken van het maken van inhoud in uw inheemse React-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 deze derde post van de serie maak je de volgende pagina met fotogalerijen:
Galerijen worden vaak gebruikt om een verzameling verwante inhoud op zo'n manier weer te geven dat alleen de benodigde informatie wordt weergegeven. Meestal bevat dit een foto, een titel en andere relevante informatie.
Hier zijn een paar voorbeelden van dit soort lay-out dat in het wild wordt gebruikt:
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'; importeer galerij van './src/pages/Gallery'; export standaardklasse ReactNativeCommonScreens verlengt Component render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Maak een src / pages map en maak een Gallery.js bestand erin.
Je hebt ook de reactie-natief-vector-icons pakket. Dit wordt specifiek gebruikt voor de pictogrammen in de voettekst.
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.
In tegenstelling tot de vorige twee pagina's heeft de galerijpagina enkele afbeeldingen nodig die als hoofdinhoud dienen. U kunt naar Google gaan en afbeeldingen zoeken of de afbeeldingen downloaden van de GitHub-repo. Alle afbeeldingen die ik heb gebruikt, zijn gelabeld voor hergebruik door hun respectieve eigenaars, dus u kunt ze vrijelijk gebruiken als u dat wilt. Zodra u de afbeeldingen hebt, slaat u ze op in de src / images directory. Vanwege de manier waarop de afbeeldingen worden ingedeeld, moeten ze allemaal dezelfde afmetingen hebben.
Begin met het aanmaken van het bestand (src / pages / Gallery.js) en voeg de boilerplate-code toe:
import Reageren, Component uit 'reageren'; import StyleSheet, View, ScrollView, Image, van 'react native'; importeer icoon uit 'react-native-vector-icons / FontAwesome'; import Knop van '... / components / Button'; export standaardklasse Galerij breidt component uit ...
Deze pagina heeft een constructor () functie waarbij u de paden definieert naar de afbeeldingen die u wilt gebruiken. In React Native is de manier waarop u naar afbeeldingen verwijst die zich in uw werkdirectory bevinden, door ze te vereisen zoals u een JavaScript-module zou doen. Het is ook belangrijk op te merken dat u geen dynamisch gegenereerde afbeeldingspaden kunt hebben, dus u moet het eigenlijke pad handmatig opgeven.
constructor (rekwisieten) super (rekwisieten); this.state = photos: [label: 'beach', src: require ('... /images/beach.jpg'), label: 'bridge', src: require ('... /images/bridge.jpg '), label:' fields ', src: require (' ... /images/fields.jpg '), label:' mountains ', src: require (' ... /images/mountains.jpg '), label: 'sunflower', src: require ('... /images/sunflower.jpg'), label: 'sunset', src: require ('... /images/sunset.jpg'), label: ' lake ', src: require (' ... /images/lake.jpg '), label:' nature ', src: require (' ... /images/nature.jpg '), label:' pink ', src : require ('... /images/pink.jpg'), label: 'rails', src: require ('... /images/rails.jpg'),]; U hoeft deze niet echt in de staat te definiëren omdat de waarden niet zullen veranderen. Je zou deze in een apart bestand kunnen definiëren, importeren, toewijzen aan een variabele en deze dan direct gebruiken. Maar omwille van de eenvoud besloot ik om gewoon alles in de staat te zetten.
Binnen in de render () methode, ga je de trend breken om alles in een verpakking in te pakken ScrollView component, omdat de tabcomponent in het onderste gedeelte van het scherm een vaste positie moet hebben. Dit betekent dat zelfs als de foto's de beschikbare hoogte overschrijden, de tabbladen nog steeds op hun plaats moeten blijven. Gebruik hiervoor a Uitzicht component om alles in te pakken en de verzameling foto's alleen in een ScrollView. Hiermee kunt u de schuif alleen toepassen op de container van de fotocollectie:
render () retour (this.renderGallery () );
Nu begin je misschien een patroon te zien. Elke keer dat u JavaScript-code moet gebruiken in de render () functie, moet u een aparte functie maken om die code vast te houden, in plaats van deze direct in de render () functie. Dit houdt het mager en schoon.
Laten we nu verder gaan met de styling. Hoewel een ScrollView wordt niet gebruikt om alles deze keer in te pakken, het is belangrijk om op te merken dat je nog steeds moet leveren flex: 1 naar de hoofdcontainer, zodat deze de volledige beschikbare ruimte opgebruikt.
container: flex: 1, flexDirection: 'column', gallery: flexDirection: 'column', tabs: flexDirection: 'row', backgroundColor: '# 333', padding: 20, tab: flex: 1, pictogram: textAlign: 'center',
De renderGallery () functie lijkt erg op de renderWeeks () functie die we in de vorige zelfstudie hebben gebruikt, die we hebben gebruikt om een kalenderpagina te renderen. Als je een opfrissing wilt over hoe dat werkt, lees dan de vorige tutorial over kalenderpagina's. Wat je moet weten, is dat resizeMode wordt toegepast op de Beeld. In dit geval is het ingesteld op deksel, waardoor de afbeelding de volledige beschikbare ruimte van de container inneemt, terwijl de beeldverhouding behouden blijft. Hierdoor wordt het beeld enigszins opgeblazen voor apparaten met grotere schermen als het originele beeld kleiner is.
renderGallery () var count = 0; var previous_item = "; var pairs = this.getPairsArray (this.state.photos); return paren.map ((item, index) => return (); );
Hier is de getPairsArray () functie:
getPairsArray (foto's) var pairs_r = []; var paren = []; var count = 0; photos.forEach ((item) => count + = 1; pairs.push (item); if (count == 2) paren_r.push (paren) count = 0; pairs = [];); return paren_r;
Eindelijk, hier is de styling voor elke rij (item) en foto (foto). Let op het gebruik van flex: 1 op de daadwerkelijke foto. Dit is gedaan omdat het Beeld component zelf is zijn eigen container. U wilt dat de container zelf de helft van de beschikbare ruimte voor elke rij inneemt, dat is de reden waarom buigen eigenschap moet worden toegewezen. Als dit niet gebeurt, worden alleen de afmetingen gebruikt die de foto nodig heeft en de resizeMode dat u eerder hebt toegevoegd, heeft zelfs geen effect.
item: flex: 1, flexDirection: 'row',, foto: flex: 1
Dat is het! In deze zelfstudie leer je hoe je de lay-out voor een galerijpagina kunt implementeren. We hebben ons gericht op het omgaan met afbeeldingen als het gaat om het neerzetten van uw React Native-apps. Vaak moet je een combinatie van gebruiken buigen en resizeMode om afbeeldingen te laten vloeien zoals u dat wilt. Hoe was mijn oplossing vergelijkbaar met die van jou? Laat het ons weten op het discussieforum hieronder.
In een volgende tutorial leer je hoe je de lay-out kunt implementeren die vaak wordt gebruikt in nieuws-apps. Bekijk in de tussentijd enkele van onze andere zelfstudies over React Native en Flexbox!
