React Native позволяет разрабатывать кроссплатформенные мобильные приложения на JavaScript. В этой серии руководств вы узнаете, как использовать React Native для создания ваших отличных мобильных приложений.
Чему вы научитесь
- Создавать настоящие мобильные приложения с помощью React Native.
- Разрабатывать компоненты многократного использования.
Предпосылки
- Базовый React
- Телефон Android или iPhone для тестирования мобильных приложений.
Раздел 1. Начало работы с React Native
- Что такое React Native — введение в React Native и почему вам следует использовать React Native для разработки кроссплатформенных мобильных приложений.
- Настройка среды разработки React Native — покажем, как быстро настроить Expo и Expo Go, чтобы немедленно приступить к разработке React Native.
- React Native Hello World — узнайте, как создать первое приложение React Native под названием Hello World, и изучите структуру приложения.
Раздел 2. Компоненты Text, SafeArea и ScrollView
- Text — как отображать текст в мобильных приложениях с помощью компонента «Текст».
- SafeAreaView — визуализируйте вложенные компоненты в безопасных границах устройства с помощью компонентов SafeAreaView.
- ScrollView — создайте прокручиваемый контент в своем приложении.
Раздел 3. Отображение списка с помощью FlatList и SectionList
- FlatList — эффективное отображение большого списка элементов.
- SectionList — отображение большого списка с заголовками разделов.
Раздел 4. Ввод текста, KeyboardAvoidingView, Pressable, Switch и Image
- TextInput — узнайте, как создавать поля ввода текста с помощью различных типов клавиатур.
- KeyboardAvoidingView — как использовать компонент KeyboardAvoidingKey для автоматической настройки его свойств, чтобы вложенный компонент оставался видимым при отображении виртуальной клавиатуры.
- Pressable — используйте Pressable для создания сенсорной интерактивности в вашем приложении.
- Switch — создайте тумблер.
- Image — отображайте локальные или удаленные изображения в своем приложении.
Раздел 5. Макет
- Flexbox — узнайте, как использовать макет Flexbox для размещения компонентов в вашем мобильном приложении.
- Позиционирование — узнайте, как использовать относительное и абсолютное позиционирование для размещения компонентов на экране.
Раздел 6. Hooks
- useWindowDimensions — как использовать хук useWindowDimension для получения текущих размеров окна, включая ширину и высоту.
- useColorTheme — узнайте, как использовать хук useColorTheme для получения текущего предпочитаемого пользователем цвета цветовой темы (темного или светлого).
Раздел 7. React Navigation
В этом разделе вы узнаете, как настроить навигацию, включая навигацию по стеку, навигацию по нижним вкладкам и навигацию по ящикам для перемещения между экранами.
- Stack Navigation — настройте React Navigation и создайте Stack Navigator, который позволит вам перемещаться между экранами.
- Bottom Tab — создайте вкладку-кнопку с помощью навигатора нижних вкладок.
- Drawer — создайте ящик с помощью навигатора ящиков.