Skapa adaptiva react native appar

En mycket viktig detalj i att utveckla mobila applikationer är att kunna hantera olika storlekar på de olika Android och iOS enheterna som vi bestämt oss för att stödja. Detta gäller även att kunna hantera när användaren roterar enheten, det vill säga vi måste kunna hantera liggande samt stående format.

Vissa applikationer behöver inte alltid kunna visas i liggande format och då är det ok att bara fokusera på stående format. Men som utvecklare är det det viktigt att förstå hur vi kan justera utseendet baserat på eventuell rotering av skärmen.

Jag kommer i den här guiden gå igenom olika tekniker som vi kan använda oss av för för att skapa adaptiva/responsiva mobil appar.

Utnyttja dynamiska bredder & höjder

Ett enkelt sätt att hantera olika storlekar på enheter är att utnyttja procentuella värden istället för pixelbaserade.

Så att istället för att t ex ange width som pixlar kan vi ange ett procentuellt värde

width: '80%';

Vi kan även använda maxWidth och minWidth för att definiera en dynamisk bredd. Lika väl kan vi använda height, maxHeight samt minHeight för att styra höjden på elementen.

Om vi kombinerar width tillsammans med maxWidth kan vi bestämma vad för bredd vi vill ha men om enhetens skärm inte kan hantera den bredd som vi angett kommer vi att få 80% av tillgänglig bredd av skärmen.

Följande exempel definierar en bredd på 400px men om skärmen inte har stöd för den bredden så får vi bredden satt till 80% av tillgänglig bredd.

headerContainer: {width: 400, maxWidth: 80%}

Dimension API

min- max-height eller min-, max-width kan vara väldigt användbart och framförallt är de väldigt enkla att använda.

Men om vi behöver anpassa font storlekar, marginaler, paddings eller bilder till olika skärmstorlekar, vad gör vi då?

React Native har api för precis detta, Dimension Api. Dimension fungerar för både funktionella komponenter och för klass baserade komponenter.

React Native har även en Hook useWindowDimensions för enbart funktionella komponenter.

Skillnaden mellan dessa två alternativ är att useWindowDimension automatiskt uppdaterar bredd och höjd om och när skärm storleken förändras. till exempel när användaren roterar skärmen. Medan Dimension inte har den möjligheten. Istället får vi använda oss av addEventListener() metoden för att lyssna på när skärmens storlek förändras till exempel när användare roterar skärmen.

Jag kommer att börja med att gå igenom Dimension api'et och sedan titta på hur vi kan använda useDimension

Dimension

För att använda Dimension api'et så behöver vi importera det ifrån react-native.

import {dimension} from 'react-native';

Nu kan vi Dimension i våra JavaScript funktioner eller i våra stylesheets.

För att använda Dimension behöver vi beskriva vad det är som vi vill kunna manipulera. Är det bredd, höjd, fonter eller skalning av presentationen. Dimension har en metod get som tar ett argument, screen eller window. På en iOS enhet är dessa två detsamma, men på en Android enhet är window den tillängliga ytan vi har att arbete med medans screen är hela skärmen inklusive verktygsfältet högst upp.

vi behöver nu deklarera en variabel utanför vår komponent och innan vi definiera vårt Stylesheet.

const deviceWidth = Dimensions.get('window').width;

I detta exemplet så anger vi att vi vill få tillgång enhetens bredd.

Nu kan vi använda vår variabel för att t ex beräkna storlekarna på de olika egenskaperna i vårt Stylesheet. Ett väldig enkelt sätt att implementera Dimension i våra StyleSheets är att använda operatorn ternery.

Låt oss säga att vi vill ha ett avstånd till ovanstående element med hjälp av marginTop. Då kan vi skapa följande uttryck:

headerContainer: {
  marginTop: deviceWidth < 380 ? 30 : 50
}

Vad vi säger här, är att om bredden på vår enhet är mindre än 380 pixlar så vill vi ha en topp marginal på 30 pixlar annars så vill vi ha en topp marginal på 50 pixlar. Här får man testa sig fram så att man får rätt villkor genom att prova olika bredder.

useWindowDimensions

För att använda useWindowDimension hook behöver vi importera den.

import { useWindowDimensions } from 'react-native

När vi har importerat den kan vi använda den antingen i vår komponents JavaScript eller i vårt StyleSheet, men inte på båda ställena samtidigt.

För att använda den i vår komponent så använder vi följande syntax

const App = () =>{
  const window = useWindowDimensions();
  ...kod som utnyttjar window och dess egenskaper.
}

Om vi vill använda den i vårt StyleSheet

const styles = createStyleSheet({
  const window = useWindowDimensions();
headerContainer: {
  marginTop: window.width < 380 ? 30 : 50
  }
}

Anpassa bilder

När det gäller att anpassa bilder kan vi gå tillväga på exakt samma sätt som vi gjorde ovan för att anpassa marginaler. Så om vi har en bild som har storleken 225 pixlar både på höjd och bredd. Som ser väldigt bra ut på en större retina skärm, men som ser alldeles för stor ut på en mindre skärm. Då kan vi använda använda samma teknik som ovan.

Här är ett enkelt exempel:

const deviceWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
 imageContainer: {
  width: deviceWidth < 380 ? 175 : 225,
  height: deviceWidth < 380 ? 175 : 225,
 }
});

Vad vi säger här är att om skärmens bredd är mindre än 380 pixlar så vill vi ändra på bildens bredd och höjd till 175 pixlar. Annars vill vi att bilden har en bredd och höjd på 225 pixlar

Svårare än så här är det inte.

Givetvis kan vi använda useWindowDimensions för att åstadkomma samma resultat.

Hantera stående & liggande format