React Native Academy · Урок

Отображение текста и настройка шрифтов

Отображайте текст с помощью компонента Text, применяйте стили fontSize, fontWeight, color и lineHeight и корректно обрабатывайте многострочное содержимое.

«Отображение текста и настройка шрифтов» — бесплатный урок React Native Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Native Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Native Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

The Text Component Basics

In React Native, every word lives inside a Text component. Loose strings outside one will crash — so Text wraps all the text you show.

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

export default function Greeting() {
  return (
    <View>
      <Text>Hello, World!</Text>
      {/* This would cause an error: */}
      {/* Hello, World!  ← raw string outside Text */}
    </View>
  );
}

fontSize and fontWeight

Size text with fontSize (a number) and thickness with fontWeight like "bold" or "600". Custom fonts may only have some weights, so test on a real device.

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

export default function Typography() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.h1}>Heading 1</Text>
      <Text style={styles.h2}>Heading 2</Text>
      <Text style={styles.body}>Regular body text for paragraphs.</Text>
      <Text style={styles.caption}>Small caption text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: 32, fontWeight: '700', color: '#111' },
  h2: { fontSize: 24, fontWeight: '600', color: '#333' },
  body: { fontSize: 16, fontWeight: '400', color: '#555', lineHeight: 24 },
  caption: { fontSize: 12, fontWeight: '300', color: '#999' },
});

color and lineHeight

Set the text color with a hex or named value, and use lineHeight to space lines apart. A little breathing room makes longer text far easier to read.

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

export default function Article() {
  return (
    <Text style={styles.paragraph}>
      React Native brings the best parts of mobile development
      together, combining a smooth native experience with the
      speed of JavaScript development.
    </Text>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    color: '#444',
    lineHeight: 26,     // 26/16 = 1.625× line height
    letterSpacing: 0.2, // slight tracking for readability
  },
});

textAlign and Text Decoration

Position text with textAlign (left, center, right) and dress it up with textDecorationLine for underlines or textTransform for uppercase — just like CSS.

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

export default function TextStyling() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.centered}>Centered heading</Text>
      <Text style={styles.link}>Tap to visit website</Text>
      <Text style={styles.strikethrough}>Old price: $29.99</Text>
      <Text style={styles.uppercase}>sale ends tonight</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: { textAlign: 'center', fontSize: 20, fontWeight: 'bold' },
  link: { color: '#0066cc', textDecorationLine: 'underline' },
  strikethrough: { textDecorationLine: 'line-through', color: '#999' },
  uppercase: { textTransform: 'uppercase', letterSpacing: 2, fontSize: 14 },
});

Nested Text for Mixed Styles

Nest Text inside Text to mix styles in one line, like a single bold word. Inner Text inherits the parent style and overrides only what you set.

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

export default function MixedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>
        Welcome back,{' '}
        <Text style={{ fontWeight: 'bold', color: '#0066cc' }}>
          Alice
        </Text>
        ! You have{' '}
        <Text style={{ color: 'red', fontWeight: '600' }}>3</Text>
        {' '}unread messages.
      </Text>
    </View>
  );
}

numberOfLines and ellipsizeMode

Use numberOfLines to cap how many lines show, and ellipsizeMode to add the "..." at the end. Great for list titles that should never wrap forever.

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

const longTitle = 'The Complete Guide to Building Production-Ready React Native Applications in 2024';

export default function TruncatedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text numberOfLines={1} ellipsizeMode='tail' style={styles.title}>
        {longTitle}
      </Text>
      <Text numberOfLines={2} ellipsizeMode='tail' style={styles.body}>
        {longTitle}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  body: { fontSize: 14, color: '#666' },
});

Loading Custom Fonts with expo-font

Want your own font? Drop a .ttf in assets, then load it with the useFonts hook from expo-font. Wait until it is ready to avoid a flash of plain text.

import { useFonts } from 'expo-font';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
  });

  if (!fontsLoaded) return null; // Show splash or null while loading

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Poppins-Bold', fontSize: 24 }}>
        Custom Font Heading
      </Text>
      <Text style={{ fontFamily: 'Poppins-Regular', fontSize: 16 }}>
        Body text with Poppins Regular.
      </Text>
    </View>
  );
}

Google Fonts with @expo-google-fonts

Even easier: the @expo-google-fonts packages bundle any Google Font for you. Install one, import the hook, and use its name — no manual files needed.

import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
  });

  if (!fontsLoaded) return null;

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 24 }}>
        Inter Bold
      </Text>
      <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 16 }}>
        Inter Regular body text.
      </Text>
    </View>
  );
}

Selectable Text and onPress

By default Text cannot be copied. Add the selectable prop to allow it, or an onPress handler to make a word act like a tappable link.

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

export default function InteractiveText() {
  return (
    <View style={{ padding: 16 }}>
      {/* Selectable text (user can copy) */}
      <Text selectable style={{ fontSize: 14, color: '#333', marginBottom: 16 }}>
        Long-press to select and copy this text.
      </Text>

      {/* Tappable text link */}
      <Text
        style={{ color: '#0066cc', fontSize: 16 }}
        onPress={() => Alert.alert('Link tapped!')}
        accessibilityRole='link'
      >
        Terms and Conditions
      </Text>
    </View>
  );
}

Handling Multiline and Long Content

Text wraps on its own when it runs out of room. Inside a flex row, add flexShrink: 1 so a long line shrinks instead of pushing things off screen.

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

export default function Article() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <View style={styles.row}>
        <Text style={styles.label}>Title:</Text>
        {/* flexShrink prevents overflowing the row */}
        <Text style={styles.value} numberOfLines={1}>
          A Very Long Article Title That Would Otherwise Overflow
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { fontWeight: 'bold', color: '#333' },
  value: { flexShrink: 1, color: '#666' },
});

Text Accessibility: accessibilityLabel

For screen reader users, add an accessibilityLabel to Text that is not self-explanatory. It helps VoiceOver and TalkBack describe your app clearly.

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

export default function AccessibleText() {
  return (
    <View>
      {/* Screen reader will say: 'Alice, 5 unread messages' */}
      <View accessible accessibilityLabel='Alice, 5 unread messages'>
        <Text style={{ fontWeight: 'bold' }}>Alice</Text>
        <Text style={{ color: 'red' }}>5</Text>
      </View>

      <TouchableOpacity
        accessibilityLabel='Delete account'
        accessibilityHint='Double tap to permanently delete your account'
      >
        <Text style={{ color: 'red' }}>Delete</Text>
      </TouchableOpacity>
    </View>
  );
}

Quick Check

Quick check! Lock in what you learned about Text and fonts. ✨

Lesson Recap

Great job! All text lives in Text, fontSize and color shape it, and expo-font makes custom typefaces easy. Next up: showing images.

Часто задаваемые вопросы

Урок «Отображение текста и настройка шрифтов» бесплатный?

Да — полный текст урока «Отображение текста и настройка шрифтов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Native Academy, подпишись на CoddyKit PRO. Курс React Native Academy содержит 4 уроков всего.

Чему я научусь в уроке «Отображение текста и настройка шрифтов»?

Отображайте текст с помощью компонента Text, применяйте стили fontSize, fontWeight, color и lineHeight и корректно обрабатывайте многострочное содержимое. Ты практикуешь React Native Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Native Academy?

Предыдущий опыт не требуется. React Native Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Отображение текста и настройка шрифтов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Native Academy?

Да. Каждый урок React Native Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Компонент View как контейнер
Отображение текста и настройка шрифтов
Отображение изображений из локальных и удалённых источников
Создание простой карточки профиля

← Назад к React Native Academy