Первая программа на React Native

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Первая программа на React Native

React Native переносит идеи React на iOS и Android: компоненты, props и useState, но вместо <div> — <View>, вместо <span> — <Text>.

Обзор: React Native. Упрощённый старт без Xcode/Android Studio: Expo и Первая программа на Expo.

---

Два пути старта

Путь	Когда выбирать
Expo (npx create-expo-app)	Обучение, прототип, быстрый QR на телефон
React Native CLI	Нативные модули, нестандартная интеграция с ОС

Ниже — Expo как самый короткий путь; структура компонентов та же в bare workflow.

---

Создание проекта

npx create-expo-app@latest MyFirstApp
cd MyFirstApp
npx expo start

Установите Expo Go на телефон, отсканируйте QR из терминала.

---

Главный экран

App.js (или app/index.tsx в Expo Router):

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

export default function App() {
  const [name, setName] = useState('');
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Привет, React Native</Text>
      <TextInput
        style={styles.input}
        placeholder="Ваше имя"
        value={name}
        onChangeText={setName}
      />
      {name ? <Text style={styles.greet}>Привет, {name}!</Text> : null}
      <Text style={styles.counter}>Счётчик: {count}</Text>
      <Pressable style={styles.button} onPress={() => setCount((c) => c + 1)}>
        <Text style={styles.buttonText}>+1</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 24 },
  title: { fontSize: 22, fontWeight: '600', marginBottom: 16 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 },
  greet: { marginTop: 12, fontSize: 18 },
  counter: { marginTop: 24, fontSize: 18 },
  button: {
    marginTop: 12,
    backgroundColor: '#2563eb',
    padding: 14,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: { color: '#fff', fontWeight: '600' },
});

StyleSheet — аналог CSS, но объекты JavaScript (не все свойства CSS доступны).

---

Навигация (следующий шаг)

npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

Два экрана — NavigationContainer + createNativeStackNavigator. В проектах на Expo Router файлы в app/ задают маршруты автоматически (см. Expo).

---

Отладка

Действие	Как
Меню разработчика	Встряхнуть устройство или m в терминале Expo
Логи	npx react-native log-android / Xcode Console
USB Android	Отладка по USB на Android

---

Сборка для магазинов

Expo: EAS Build (eas build). Bare RN: Gradle (Android), Xcode (iOS). Подробнее: Сборка и развёртывание.

---

Связанные материалы

• Первая программа на Expo
• Capacitor — веб в нативной оболочке
• Dart / Flutter — альтернатива без JavaScript

---