Hvordan lage fleksible layouter med Flexbox: En enkel tre-kolonne layout

Å lage responsiv design for applikasjoner kan være utfordrende, men med fleksible layouter som Flexbox kan vi forenkle prosessen betydelig. La oss se på et praktisk eksempel på hvordan vi kan lage en enkel layout med tre kolonner som strekker seg fra topp til bunn, og hvordan vi kan gjøre denne layouten responsiv, slik at den fungerer på tvers av forskjellige enheter og orienteringer.

For å lage denne layouten bruker vi React Native. Her er koden for komponentene som skaper denne layouten:

javascript
Copy code
import React from "react";

import { Text, View } from "react-native";

import styles from "./styles";
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>

        <Text style={styles.boxText}>#1</Text>

      </View>
      <View style={styles.box}>
        <Text style={styles.boxText}>#2</Text>
      </View>
      <View style={styles.box}>

        <Text style={styles.boxText}>#3</Text>

      </View>
    </View>
  );
}

Her bruker vi en container-view, som er den ytterste komponenten, som en kolonne. De indre views fungerer som rader, og hver View komponent representerer en av de tre seksjonene. På samme måte som i HTML, kan vi se på View som et div-element, og Text som et p-element.

La oss ta en nærmere titt på stilene som brukes for å lage denne layouten:

javascript
Copy code
import { Platform, StyleSheet, StatusBar } from "react-native";

export default StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-around",
    backgroundColor: "ghostwhite",
    ...Platform.select({
      ios: { paddingTop: 20 },

      android: { paddingTop: StatusBar.currentHeight },

    }),
  },
  box: {
    width: 300,
    height: 100,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightgray",
    borderWidth: 1,
    borderStyle: "dashed",
    borderColor: "darkslategray",
  },
  boxText: {
    color: "darkslategray",
    fontWeight: "bold",
  },
});

I denne koden er de viktigste stilene som brukes for containeren flexDirection: "column", som gjør at innholdet blir arrangert vertikalt. Videre sørger alignItems: "center" og justifyContent: "space-around" for at de enkelte seksjonene blir justert sentrert og at det er god plass mellom dem. Når enheten roteres fra portrettmodus til landskapsmodus, vil layouten fortsatt fungere, men kanskje med noe ubenyttet plass på sidene.

En forbedring av denne layouten kan være å gjøre at seksjonene strekker seg for å fylle all tilgjengelig plass, i stedet for å la den faste bredden på 300 piksler forbli uforandret. Dette kan oppnås ved å endre box-stilene slik:

javascript
Copy code
export default StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "ghostwhite",
    justifyContent: "space-around",
    ...Platform.select({
      ios: { paddingTop: 20 },

      android: { paddingTop: StatusBar.currentHeight },

    }),
  },
  box: {
    height: 100,
    justifyContent: "center",
    alignSelf: "stretch",
    alignItems: "center",
    backgroundColor: "lightgray",
    borderWidth: 1,
    borderStyle: "dashed",
    borderColor: "darkslategray",
  },
  boxText: {
    color: "darkslategray",
    fontWeight: "bold",
  },
});

En viktig endring her er alignSelf: "stretch", som gjør at seksjonene strekker seg horisontalt for å fylle tilgjengelig plass, og at width ikke lenger er definert i stilene – i stedet blir bredden beregnet dynamisk.

Når skjermen roteres, vil layouten nå bruke hele skjermens bredde, både i portrett- og landskapsmodus.

Et annet viktig aspekt ved å lage fleksible layouter er å abstrahere komponentene for bedre vedlikeholdbarhet. I stedet for å gjenta stilene for hver View, kan vi lage en egen komponent for Box, som kan gjenbrukes i hele appen:

javascript
Copy code
import React from "react";

import { PropTypes } from "prop-types";

import { View, Text } from "react-native";
import styles from "./styles";

export default function Box({ children }) {

  return (
    <View style={styles.box}>
      {children}
    </View>
  );
}
Box.propTypes = {
  children: PropTypes.node.isRequired,
};

Med denne tilnærmingen kan vi bruke Box-komponenten i hele appen og på denne måten unngå gjentakelse av stilene.

Hvordan annotere punkter på kart i React Native

I denne delen skal vi lære hvordan man kan annotere interessante punkter på kart i en React Native-applikasjon. En annotasjon er en form for ekstra informasjon som legges til på et kart, og det er en viktig funksjon når du arbeider med geolokalisering og kart i mobilapplikasjoner. Når du bruker MapView-komponenten, får du annotasjoner automatisk, men det er sannsynlig at du ønsker å vise spesifikke steder som er relevante for din applikasjon, heller enn de som vises som standard.

Når du ønsker å vise interessante punkter, som for eksempel lokale bryggerier, er det viktig å kunne kontrollere hvilke punkter som vises på kartet. For å gjøre dette må du lære hvordan du kan bruke spesifikke markører for bestemte steder, og hvordan du kan vise områder på kartet, som kan være nyttige for applikasjoner som kartlegger forskjellige geografiske interesser. Ved å tilpasse visningen av punktene kan du sørge for at kartet er både informativt og relevant for brukeren.

En av hovedutfordringene her er å skru av de vanlige interessene som er inkludert automatisk og istedenfor lage egne markører. For å oppnå dette kan du sette egenskapen showsPointsOfInterest til false. Denne innstillingen hindrer at standard punktene vises og lar deg selv definere hvilke interesser som skal vises. Et eksempel kan være å plotte bryggerier på kartet, der hvert bryggeri blir representert som et punkt på kartet, og et "callout"-vindu vises når man trykker på markøren for å vise informasjon som navn og beskrivelse.

Som et ekstra trinn kan du også implementere "overlays", som er områder definert av flere punkter som kobles sammen, for å markere et spesifikt geografisk område. Dette kan være nyttig hvis du vil markere et område på kartet, som for eksempel et nabolag eller et område med spesifikke interesser. I eksempelet med IPA- og stout-elskere, vil et overlay vise hvilke områder på kartet som har høyest konsentrasjon av disse to typene øldrikkere, basert på deres geografiske plassering.

Ved å bruke Polygon-komponenten kan du definere et slikt område. Regionen kan bestå av flere koordinater (breddegrad og lengdegrad) som omkranser et bestemt område. Overlays kan være spesielt nyttige i applikasjoner som krever visualisering av et geografisk område fremfor et enkelt punkt, som for eksempel apper for boligjakt eller ruteplanlegging.

Det er viktig å forstå at annotasjoner og overlays kan forbedre brukeropplevelsen ved å gjøre kartet mer dynamisk og informativt. I tillegg gir muligheten til å lage tilpassede visninger deg fleksibiliteten til å vise akkurat den informasjonen som er viktig for applikasjonen din. Dette kan være spesielt nyttig i tilfeller hvor du har en spesifikk målgruppe, som i vårt tilfelle med øldrikkere, og ønsker å tilby mer målrettede data basert på brukerens plassering.

For en mer helhetlig applikasjon kan det også være nyttig å integrere kartet med andre komponenter som tilbyr informasjon om veibeskrivelser, lokale hendelser eller andre relevante geolokasjonsbaserte data. På den måten kan du bygge en applikasjon som ikke bare viser et kart, men som også hjelper brukeren å ta informerte beslutninger basert på deres nåværende posisjon eller andre geografiske preferanser.