View: vad är det, behållaregenskaper och React Native

Vad är View i React Native

View är den grundläggande komponenten i React Native som fungerar som en behållare för andra komponenter. Den stöder styling via StyleSheet, layout via Flexbox, beröringshantering, animationer och transformationer. View är en abstraktion över inbyggda behållarelement: UIView på iOS och android.view.View på Android.

I React Native kan HTML-element inte användas — istället byggs alla layouter av View. Även Text och Image är vanligtvis inslagna i View för positionering. Komponenten kan vara tom (bara behållare) eller innehålla valfritt antal underordnade element på valfritt djup.

View stöder rendering på båda plattformarna från samma JavaScript-kod. Flexbox-egenskaper, marginaler, bakgrund, skuggor och kanter fungerar likadant på iOS och Android. Plattformsskillnaderna är minimala — till exempel använder skuggor på iOS shadowColor/shadowOffset, och på Android elevation.

Enligt React Native Layout Docs, 2024 är View optimerad för mobila enheter: den skapar inte onödiga inbyggda representationer vid optimering av flatten och hanterar korrekt kaskaduppdatering när förälderns stilar ändras.

Egenskaper och API för View-komponenten

View-komponenten har en rik uppsättning props för att hantera utseende, placering och interaktivitet. Alla props är indelade i flera kategorier: styling, beröringshändelser, tillgänglighet och plattformsfunktioner. Låt oss titta på nyckelgrupperna.

View:s stilprops

View stöder alla standard CSS-egenskaper för mobila plattformar. De viktigaste: flexDirection, justifyContent, alignItems för positionering; margin, padding för avstånd; backgroundColor, borderRadius för utseende; width, height, maxHeight för mått.

Beröringshändelser och gester

View kan bearbeta beröringshändelser via propsen onStartShouldSetResponder, onMoveShouldSetResponder och onResponderGrant. Dessa händelser gör det möjligt att implementera anpassade gester utan bibliotek. För standardklick används onTouchStart, onTouchEnd och onPress (via Pressable eller TouchableOpacity).

Plattformsspecifika props

På iOS är shadowColor, shadowOffset, shadowOpacity, shadowRadius tillgängliga för skuggor. På Android ignoreras dessa egenskaper — istället används elevation. onLayout- callback anropas när View:s mått ändras, vilket är användbart för adaptiva layouter.

Layout med View och Flexbox

Flexbox är den enda layoutmekanismen i React Native (till skillnad från Web där Grid och Float är tillgängliga). All positionering av element sker via Flexbox-egenskaperna för View-komponenten. Som standard är flexDirection i View inställd på column, inte row som på Web, vilket motsvarar den vertikala orienteringen av mobila skärmar.

Huvudsakliga Flexbox-egenskaper i View

flexDirection bestämmer riktningen på huvudaxeln: column (standard) eller row. justifyContent hanterar fördelning längs huvudaxeln (flex-start, center, space-between). alignItems — längs tväraxeln (stretch — standardvärde). flex bestämmer andelen tillgängligt utrymme för det underordnade elementet.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

Exemplet visar en typisk struktur: yttre View — kort, inre row — rad med avatar och textblock, content — kolumn med namn och roll. En sådan nästlad View-struktur är standard för varje React Native-skärm.

Skillnader mellan View och HTML div

Även om View konceptuellt liknar HTML div, finns det viktiga skillnader mellan dem som är viktiga att förstå vid överföring av kod från Web till React Native. Dessa skillnader gäller rendering, stilar och standardbeteende.

Den viktigaste skillnaden — standard flexDirection: column. Detta innebär att utan explicit inställning placeras underordnade element vertikalt, inte horisontellt. Den andra skillnaden: View:s width och height sträcker sig som standard över allt tillgängligt utrymme från föräldern (analogt med width: 100 % i CSS).

Praktiska exempel med View

Låt oss titta på två verkliga exempel på användning av View i React Native-applikationer: centrering av innehåll över hela skärmen och skapande av ett adaptivt rutnät av kort. Båda mönster återfinns i varje projekt.

Exempel 1: platshållarskärm med centrering

För att skapa ett tomt tillstånd (empty state) används View med flex: 1 och centrering på båda axlarna. Detta är standardmönstret för laddnings-, fel- och tomma listskärmar.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

Kombinationen av justifyContent: center och alignItems: center i en View med flex: 1 centrerar innehållet på båda axlarna över hela skärmen. Detta är det vanligaste användningsmönstret för View i React Native.

Exempel 2: kortrutnät med Flexbox

För att visa två kolumner med produkter eller artiklar används View med flexDirection: row, flexWrap: wrap och underordnade View med fast bredd. Detta mönster ersätter CSS Grid i React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

I detta exempel fungerar den yttre View med flexWrap: wrap som motsvarighet till CSS Grid. Varje kort upptar 48 % av bredden och lämnar mellanrum mellan kolumnerna. Detta är ett typiskt mönster för kataloger och innehållsflöden.