Text: vad är det, textvisning och React Native

Vad är Text i React Native

Text är en React Native-komponent för att visa textinnehåll. Till skillnad från webbutveckling, där det finns många semantiska taggar för text, skapas alla textelement i React Native via Text. Komponenten kan visa både enkel text och komplexa strukturer med nästlade Text och stylade fragment.

Text hanterar automatiskt radbrytning, styr teckensnittsfamilj, storlek, färg och justering. Komponenten stöder beröringshändelser (onPress), vilket gör det möjligt att skapa klickbara länkar utan extra omslag. En viktig begränsning: Text kan inte placeras direkt i View — endast i andra Text-komponenter eller som direkt innehåll.

Enligt React Native Nested Text, 2024 ärver nästlade Text-komponenter stilar från föräldern. Detta gör det möjligt att ställa in en basstil på den övre nivån och åsidosätta enskilda egenskaper för specifika fragment — liknande hur span fungerar med CSS på webben.

Egenskaper och API för Text-komponenten

Text-komponenten erbjuder en uppsättning props för att hantera visning, beteende och tillgänglighet. Huvudkategorier: stilprops (typsnitt, storlek, färg, justering), visningsprops (numberOfLines, lineBreakMode) och interaktiva (onPress, onLongPress).

Props för textvisning

numberOfLines begränsar antalet visade rader och lägger till ellips i slutet. ellipsizeMode styr ellipsens position (head, middle, tail, clip). adjustsFontSizeToFit minskar automatiskt teckenstorleken så att texten får plats inom angivna gränser. lineBreakMode bestämmer hur text utanför numberOfLines kapas.

Interaktiva props

Text stöder onPress och onLongPress för att hantera beröringar. Detta gör det möjligt att skapa textlänkar utan att använda TouchableOpacity. onTextLayout returnerar information om textens position efter rendering — användbart för animationer och positionering.

Plattformsspecifika props

På iOS finns disabled (inaktiverar text), selectable (aktiverar markering), dataDetectorTypes (automatisk igenkänning av länkar, telefoner, adresser). På Android finns selectable (via textSelectable), includeFontPadding (tar bort extra mellanrum).

Skillnader mellan Text och HTML-elementen p och span

Även om Text visuellt liknar HTML-taggarna p och span, är de arkitektoniska skillnaderna betydande. I React Native saknas DOM-modellen med semantiska textelement — alla textnoder hanteras via en enda Text-komponent med olika props.

Den viktigaste skillnaden — stilärvning genom nästling av Text. Om den yttre Text har fontSize: 18 och color: blue, ärver alla nästlade Text dessa stilar. Vilken prop som helst kan åsidosättas i den inre Text genom att ange ett specifikt värde. Detta sparar kod och gör strukturen renare.

Textstyling och typsnitt

Text stöder de flesta CSS-egenskaper för typografi: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. I React Native kopplas typsnitt in på plattformsnivå, inte via @font-face.

Ansluta anpassade typsnitt

För att använda anpassade typsnitt måste de läggas till i mappen assets/fonts och anges i react-native.config.js. Efter ombyggnad av appen blir typsnittet tillgängligt via fontFamily. React Native stöder inte webbtypsnitt (Google Fonts) direkt — nedladdning av .ttf eller .otf-filer krävs.

Ärftlighet och kaskad av stilar

Mekanismen för ärvning i Text skiljer sig från CSS. Stilar överförs endast från Text till nästlad Text, men inte från View till Text. Om ett typsnitt måste ställas in för hela appen används defaultProps för Text-komponenten eller en anpassad omslagskomponent.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

I detta exempel ställer den yttre Text in fontSize: 18 och color: #333. Den inre Text ärver fontSize (18), men åsidosätter fontWeight till bold och color till #007AFF. Den yttre Text ärver bara sina egna stilar. Detta är en exakt analogi till hur nästlade span fungerar i HTML.

Praktiska exempel med Text

Låt oss titta på två typiska scenarier för att använda Text i React Native: formatering av text med nästling och att skapa en klickbar komponent med radbegränsning.

Exempel 1: nyhetskort med formatering

I detta exempel används Text för att visa flerradig text med markerade element: rubrik, datum och innehåll med länk.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

I denna struktur finns tre oberoende Text-komponenter (rubrik, datum, innehåll), var och en med sin egen stil. Inuti Text med innehåll finns ytterligare en Text med onPress för länken. Detta mönster används för nyhetsflöden, bloggar och kommentarer.

Exempel 2: text med radbegränsning

För att visa textförhandsvisning med ellips används numberOfLines. Detta är ett standardmönster för produktkort och artiklar i listor.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

Egenskapen numberOfLines = 2 begränsar texten till två rader. Om texten är längre lägger React Native automatiskt till ellips i slutet av den andra raden. Parametern ellipsizeMode: 'tail' anger att ellipsen ska vara i slutet (head, middle, clip finns också).