Skip to content

Latest commit

 

History

History
393 lines (270 loc) · 20.1 KB

start04.md

File metadata and controls

393 lines (270 loc) · 20.1 KB
id title sidebar_label
start04
Основы React Native
Основы React Native

import YouTube from 'react-youtube'

React Native похож на React, но он использует собственные компоненты вместо веб-компонентов в качестве строительных блоков. Чтобы понять базовую структуру приложения React Native, вам необходимо понять некоторые основные концепции React, такие как JSX, компоненты, состояние и свойства. Если вы уже знакомы с React, вам все равно нужно изучить некоторые вещи, специфичные для React Native, например нативные компоненты. Это руководство предназначено для любой аудитории, независимо от того, есть у вас опыт работы с React или нет.

Компоненты React Native

Это строительные блоки библиотеки react-native, из которых мы создаём интерфейсы для приложений. Компоненты позволяют разделить UI на независимые, повторно используемые части и работать с каждой из них отдельно. Концептуально, компоненты похожи на JavaScript-функции.

Компоненты-функции

Самый простой способ объявить компонент – это написать JavaScript-функцию:

import * as React from 'react'
import { Text } from 'react-native'

const App = () => (
  <Text>Hello world!</Text>
)

export default App

Прежде всего, нам нужно импортировать React, чтобы иметь возможность использовать JSX, который затем будет преобразован в собственные компоненты каждой платформы. В строке 2 мы импортируем компонент Text из react-native Затем мы находим функцию App, которая является функциональным компонентом и возвращает компонент Text в качестве своего дочернего элемента. Если вам интересно, вы можете поиграть с образцом кода прямо в веб-симуляторах. Также вставьте код в файл index.js или App.js(Expo), чтобы создать настоящее приложение на локальном компьютере.

React Native поставляется с поддержкой ES2015, поэтому вы можете использовать этот материал, не беспокоясь о совместимости import, export, const и from в приведенном выше примере - все это функции ES2015. ES2015 (также известный как ES6) - это набор улучшений для JavaScript, который теперь является частью официального стандарта, но еще не поддерживается всеми браузерами, поэтому часто он еще не используется в веб-разработке.

Другая необычная вещь в этом примере кода:

<Text>Hello world!</Text>

Это JSX - синтаксис для встраивания XML в JavaScript. Многие фреймворки используют специализированный язык шаблонов, который позволяет встраивать код в язык разметки. В React все наоборот. JSX позволяет писать свой язык разметки внутри кода. Это похоже на HTML в Интернете, за исключением того, что вместо таких веб-вещей, как <div> или <h1>, вы используете компоненты React. В этом случае <Text> является основным компонентом, который отображает некоторый текст.

Почему JSX?

React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения. Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React разделяет ответственности с слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику. Мы вернёмся к компонентам в следующем разделе, но если вы ещё не очень хорошо умеет размещать разметку в JS, этот доклад может убедить вас в другом. React не требует использование JSX, но большинство людей находят его полезным в качестве визуальной демонстрации при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.

После компиляции выражения JSX становятся обычными вызовами функций JavaScript и вычисляются в объекты JavaScript. Это означает, что вы можете использовать JSX внутри операторов if и for, присваивать его переменным, принимать его в качесиве аргументов и возвращать из функций:

const getGreeting = user => {
  if (user) {
    return <Text>Привет!</Text>
  }
  return <Text>Hello</Text>
}

Подробней о JSX

Компоненты-классы

Второй способ создания компонента через классы сейчас стал менее популярен в связи с тем, что нововведение React Hooks позволяет использовать состояние и другие возможности React без написания классов, поэтому мы от них отказались и в этом курсе этот способ больше рассматриваться не будет.

import * as React from 'react'
import { Text } from 'react-native'

class App extends React.Component {
   render() {
     return <Text>Hello world!</Text>
  }
}

export default App

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

Text

C этим компонентом React для отображения текста мы уже познакомились. Text поддерживает вложение, стили и сенсорную обработку.

Image

Компонент React для отображения различных типов изображений, включая сетевые изображения, статические ресурсы, временные локальные изображения и изображения с локального диска.

import * as React from 'react'
import { Image } from 'react-native'

const App = () => (
  <Image style={{ width: 100, height: 100 }}
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
  />
)

export default App

Высота и ширина компонента определяют его размер на экране. Всего существует три способа работы размерами: фиксированные размеры,гибкие размеры, процентные размеры. Подробней о них здесь.

View

Самый фундаментальный компонент для создания пользовательского интерфейса - View - контейнер, который поддерживает макет с flexbox стилем, некоторой обработкой касаний и элементами управления специальными возможностями.

View предназначено для вложения в другие представления и может иметь от 0 до многих дочерних элементов любого типа.

В этом примере создается представление, которое обертывает два поля с цветом и текстовый компонент в строке с заполнением.

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

const App = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View style={{ backgroundColor: "gold", flex: 0.5 }} />
    </View>
  );
};
export default App

View предназначены для использования с StyleSheet, хотя встроенные стили также поддерживаются.

StyleSheet

С React Native вы стилизуете свое приложение с помощью JavaScript. Все основные компоненты принимают свойство с именем style.

<Text style={{ color: 'gold' }}>Hello world!</Text>

Имена и значения стилей обычно соответствуют тому, как работает CSS в сети, за исключением того, что имена пишутся с использованием верблюжьего регистра, например backgroundColor, а не background-color.

style prop может быть обычным объектом JavaScript. Вы также можете передать массив стилей - последний стиль в массиве имеет приоритет, поэтому вы можете использовать его для наследования стилей.

По мере того, как компонент становится более сложным, часто бывает проще использовать StyleSheet.create для определения нескольких стилей в одном месте.

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

const App = () => {
  const { container, red, bigBlue } = styles
  return (
    <View style={container}>
      <Text style={red}>just red</Text>
      <Text style={bigBlue}>just bigBlue</Text>
      <Text style={[bigBlue, red]}>bigBlue, then red</Text>
      <Text style={[red, bigBlue]}>red, then bigBlue</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    marginTop: 50
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30
  },
  red: {
    color: 'red'
  }
})

export default App

Композиция компонентов

Компоненты могут ссылаться на другие компоненты в своём выводе (результате отрисовки). Подобно матрешке компонеты вкладываются друг в друга. К примеру, мы можем создать компонент App, который отрисовывает компонент HelloWorld много раз:

import * as React from 'react'
import { Text } from 'react-native'

const HelloWorld = () => (
  <Text>Hello world!</Text>
)

const App = () => (
  <>
    <HelloWorld />
    <HelloWorld />
    <HelloWorld />
  </>
)

export default App

Пустые теги <>...</> это сокращённая запись объявления фрагментов. Фрагменты позволяют возвращать несколько элементов из компонента. Являясь своего рода оберткой для группы компонентов. Фрагменты позволяют формировать список дочерних элементов, не создавая лишних узлов в DOM. Возврат списка дочерних элементов из компонента — распространённая практика.

Props

Большинство компонентов можно настроить при их создании с различными параметрами. Эти параметры создания называются реквизитами - props.

Ваши собственные компоненты также могут использовать реквизиты. Это позволяет вам создать один компонент, который будет использоваться во многих разных местах вашего приложения, с немного разными свойствами в каждом месте. Чтобы получить их значения, обратитесь к props.YOUR_PROP_NAME в ваших функциональных компонентах или this.props.YOUR_PROP_NAME в ваших компонентах класса. Вот пример:

import * as React from 'react'
import { Text } from 'react-native'

const HelloWorld = (props) => (
  <Text>Hello world {props.name}!</Text>
)

const App = () => (
  <>
    <HelloWorld name='Luk' />
    <HelloWorld name='John' />
    <HelloWorld name='Ivan' />
  </>
)

export default App

Использование name в качестве props позволяет нам настроить компонент приветствия, чтобы мы могли повторно использовать этот компонент для каждого из наших приветствий. В этом примере также используется компонент HelloWorld в JSX. Способность делать это - вот что делает React таким крутым.

Только для чтения

Компонент, объявленный как функция или класс, никогда не должен модифицировать свои свойства props. Рассмотрим эту sum функцию:

const sum = (a, b) => a + b

Такие функции называются "чистыми". Потому что они не изменяют свои аргументы и всегда возвращают одинаковый результат для одних и тех же аргументов.

В противоположность им, следующая функция не является чистой, потому что она изменяет свои аргументы:

const count => (account, amount) => account += amount

React является очень гибким, но он имеет одно строгое правило:

:::tip Все React-компоненты должны работать как чистые функции в отношении своих свойств props. :::

Вопросы

React Native использует собственные компоненты вместо веб-компонентов React в качестве строительных блоков?

  1. true
  2. false

Компоненты React Native это строительные блоки библиотеки:

  1. react
  2. react-native

Концептуально, компоненты похожи на JavaScript-функции?

  1. true
  2. false

Чтобы иметь возможность использовать JSX нужно импортировать и подключить библиотек

  1. React
  2. React Native
  3. JSX

React Native поставляется с поддержкой ES2015?

  1. true
  2. false

Это JSX - синтаксис для встраивания ___ в JavaScript.

  1. HTML
  2. XML
  3. CSS

Сколько существует способов создания компонентов?

  1. 1
  2. 2
  3. 3

Компоненты-функции это более предпочтительный способ создания компонентов?

  1. true
  2. false

Для отображения текста мы используем компонет:

  1. text
  2. Text
  3. h1

Для отображения различных типов изображений мы используем компонент:

  1. Image
  2. img
  3. Imag

Сколько существует способов работы с размерами в React Native:

  1. 1
  2. 2
  3. 3

Фундаментальный компонент для создания пользовательского интерфейса:

  1. <>
  2. Text
  3. View

View не предназначено для вложения в другие представления?

  1. true
  2. false

View может иметь от 0 до многих дочерних элементов любого типа?

  1. true
  2. false

View не предназначены для использования с StyleSheet?

  1. true
  2. false

С React Native вы стилизуете свое приложение с помощью JavaScript. Все основные компоненты принимают свойство с именем style?

  1. true
  2. false

Имена и значения стилей обычно пишутся в ___?

  1. UpperCase
  2. LowerCase
  3. CamelCase

Style prop может быть обычным объектом JavaScript, а также можете передать массив стилей?

  1. true
  2. false

Компоненты могут ссылаться на другие компоненты в своём выводе (результате отрисовки)?

  1. true
  2. false

Пустые теги <>...</> это сокращённая запись объявления компанента View?

  1. true
  2. false

Как называются параметры создания компонента?

  1. prop
  2. props

Компонент, объявленный как функция или класс, никогда не должен модифицировать свои свойства props?

  1. true
  2. false

Все React-компоненты должны работать как чистые функции в отношении своих свойств props?

  1. true
  2. false

Ссылки:

  1. React Native - official website
  2. Learn React

Become a Patron!