Урок 03

Первый экран

Создаём простой экран, чтобы увидеть базовые компоненты.

Базовый компонент

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

export default function App() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Привет, React Native!</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
    },
});

Что произошло

View — аналог <div>. Контейнер для других элементов. Не отображает текст.

Text — аналог <p> или <span>. Весь текст должен быть внутри <Text>. Нельзя написать текст прямо внутри <View>.

StyleSheet.create — создаёт стили. Не CSS, а объекты JavaScript.

Почему не CSS

В вебе стили описываются в CSS-файлах или через className. В React Native нет CSS. Стили — это объекты, передаваемые в проп style.

<View style={{ backgroundColor: 'red' }} />

Или через StyleSheet.create:

const styles = StyleSheet.create({
    box: { backgroundColor: 'red' },
});

<View style={styles.box} />

StyleSheet.create — предпочтительный способ: работает быстрее и даёт проверку типов.

Именование свойств

Свойства в camelCase: backgroundColor, fontSize, marginTop.

// CSS
background-color: red;
font-size: 16px;

// React Native
backgroundColor: 'red',
fontSize: 16,

Значения без единиц измерения. fontSize: 16, не '16px'.

Если ты уже знаешь React

JSX, компоненты и пропсы — те же. Отличие только в компонентах (View вместо div) и стилях.

Несколько элементов

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

export default function App() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Заголовок</Text>
            <Text style={styles.subtitle}>Подзаголовок</Text>
            <Text>Обычный текст</Text>
        </View>
    );
}

<Text> вкладывается в <View>. Обратное невозможно.

Текст внутри Text

<Text>
    Обычный текст, <Text style={{ fontWeight: 'bold' }}>жирный</Text>, снова обычный.
</Text>

Вложенные <Text> наследуют стиль родителя.

Платформенные различия

import { Platform } from 'react-native';

const styles = StyleSheet.create({
    box: {
        paddingTop: Platform.OS === 'ios' ? 50 : 30,
    },
});

Platform.OS — 'ios' или 'android'.

Итоги

  • View вместо div, Text вместо p
  • Текст только внутри Text
  • Стили — объекты, не CSS
  • StyleSheet.create — предпочтительно
  • Значения без единиц
  • Platform.OS для различий