React Native

Агата Рудько

Зачем нужны мобилки?

🥺

А как разрабатывать мобильные приложения?

  • Java, Kotlin
  • Objective C, Swift
  • Кроссплатформенные приложения

А как запускать?

  • Android Studio
  • Xcode

Что такое React Native и зачем он нужен?

- Пишем сразу под несколько платформ

- Пишем на JS, а под капотом работает нативный код

- Разрабатываем интерфейс с помощью React

Как писать код на React Native?

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

function App() {
  return (
    <View>
      <Text>Hello React Native!</Text>
    </View>
  );
}

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

View, Text:

 

View aka div, но стили пробрасываем в style, а не в className)

 

Любой текст (буковки) может быть только внутри Text.

Взаимодействие с пользователем

Button, TouchableOpacity, TouchableHighlight:

 

Button - это нативная кнопка 🤔🤔🤔.
 

TouchableOpacity - это штука на которую можно нажать, и она поменяет свой opacity 🤔🤔🤔.
 

TouchableHighlight - это штука на которую можно нажать, и она поменяет цвет фона 🤔🤔🤔.

Обработка действий

Нажатия обрабатываются через onPress (тк. тыкаем пальцем ☝️).

 

Нажатия могут быть обработаны не на всех компонентах. На View нажать нельзя! Можно нажать на Button, Touchable компоненты, Text и другие.

Как добавить стиля

StyleSheet

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 36,
    marginBottom: 5,
  },
  itemText: {
    fontSize: 18,
    color: 'rgba(0, 0, 0, 0.5)',
  },
});

Флексим

Размещать элементы на экране можно только с помощью FlexBox. Это единственная опция, которая есть в React Native.

 

Другими словами: display: flex всегда.

 

Padding, margin, position и остальное счастье работает нормально.

Ещё приколы

ScrollView:

 

По умолчанию прокрутки нет нигде. Если хотите её добавить - нужно обернуть все в ScrollView. Он в свою очередь пригоден для простых конструкций. Если нужен большой длинный список, то нужно использовать FlatList.

Ещё приколы

SafeAreaView:

Остальной зоопарк компонентов

https://reactnative.dev/docs/components-and-apis

 

https://github.com/react-native-community

Навигация 🛰️

На вебе у нас есть страницы. В приложении - это экраны.

 

Переходить по экранам нам позволяют навигаторы.

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

ВопросЫ?

Made with Slides.com