React Native - Touchables og skærmdimensioner

React Native gør processen med at udvikle en applikation, der fungerer på både Android- og iOS-enheder meget lettere, end den engang var. Mens du før skulle arbejde med mindst to programmeringssprog og meget forskellige API'er, inkluderer React Native nogle nyttige ud af kassen.

Her er en oversigt over to, der hjælper dig med at opbygge din næste app.

Touchables

Nogle af de vigtigste funktioner i mobile enheder drejer sig om interaktion med brugerberøringer. Hvordan en mobilapp håndterer og reagerer på disse interaktioner kan gøre eller ødelægge brugerens oplevelse.

React Native sendes med en Buttonkomponent, der fungerer til mange standardinteraktioner onPress. Som standard giver det brugerfeedback ved at ændre opacitet for at vise, at knappen blev trykket. Anvendelse:

For mere komplekse brugssager har React Native API'er indbygget til at håndtere presseinteraktioner kaldet Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Hver af disse berørbare komponenter kan designes og bruges sammen med et bibliotek som den indbyggede Animated, så du kan lave dine egne typer brugerdefineret brugerfeedback.

Nogle eksempler på brug af disse komponenter:

// with images    // with text  Hello 

Du kan også håndtere forskellige typer tryk på knapper. Som standard er knapper og touchables konfigureret til at håndtere regelmæssige tap, men du kan også betegne en funktion, der f.eks. Kræver tryk og hold interaktioner.

For at se alle de tilgængelige rekvisitter, og hvordan disse komponenter fungerer, kan du se JavaScript-kildekoden til Touchables her.

Skærmdimensioner

React Native bruger Dots Per Inch (DPI) til at måle størrelsen på brugergrænsefladen (UI) og alt, hvad der vises på UI. Denne type måling gør det muligt for en applikation at se ensartet ud over forskellige skærmstørrelser og pixeltætheder.

I standardbrugssager kan applikationer udvikles uden at skulle kende specifikationerne for brugerens enhed (for eksempel pixeltæthed), da UI-elementerne skaleres automatisk.

Når det er påkrævet, er der tilgængelige API'er, som PixelRatiohjælper dig med at finde ud af pixeltætheden på brugerens enhed.

For at få vinduet eller skærmhøjden / bredden på en brugers enhed har React Native en API kaldet Dimensions.

import { Dimensions } from 'react-native';

Her er de metoder, som DimensionsAPI'en giver:

Dimensions.get('window').height; Dimensions.get('window').width; Dimensions.get('screen').height; Dimensions.get('screen').width;

Bemærk: Der har været nogle kendte problemer tidligere med Dimensions API, som f.eks. Ikke at returnere de korrekte oplysninger, når en bruger roterer deres enhed.Det er bedst at sikre dig, at du tester dette på faktiske enheder, inden du implementerer en applikation.

Mere info om responsivt design:

  • Gratis responsivt designkursus
  • Bedste Bootstrap-tutorials til responsivt webdesign
  • Hvordan man tænker responsivt
  • Vejledning til responsive billeder
  • Lær responsivt design på 5 minutter