React Native уроки icon flatlist components приложения view

Разработчики React Native front обычно работают в экосистеме веб-браузеров. Обычно разработка родных мобильных приложений была для нас отдельным миром.

Но, похоже, времена меняются, и с обещанием, программирования приложений как для iOS так и для Android, с одного языка программирования (в данном случае Javascript), родились так называемые Cross-Platforms frameworks, как Ionic, NativeScript и React Native, так что frontend, что мы хотим сделать собственными приложениями с JS, у нас уже легче.

В этом посте мы рассмотрим возможности разработки приложений с помощью React Native (RN) и Expo SDK/XDE . Посмотрим, как!

Курс можно скачать в конце поста.

react native android

Что такое react native

React Native — это платформа, которая позволяет разработчикам развертывать собственные приложения для мобильных устройств с использованием Javascript. На данный момент минимальными поддерживаемыми операционными системами являются: Android 4.1 (API 16) и >= iOS 8.0>

Почему / Как?

Подожди! Разве Кордова не разрешала делать то же самое? Что приносит нам RN? Основное различие между RN и приложениями на основе Cordova заключается в том, что в Cordova приложения работают внутри webview, в то время как RN apps визуализируют с использованием собственных views .

Приложения RN имеют прямой доступ ко всем собственным API и представлениям, предлагаемым родными операционными системами. Таким образом, пользовательский опыт и производительность одинаковы для родного приложения .

Когда / Кто / Где?

В марте 2015 года Facebook объявил на F8, что React Native доступен на Github. И есть важные приложения, которые уже используют его:

Архитектура выполнения в React Native

Первое,что можно предположить, это то, что React Native напрямую компилирует JS-код в соответствующий собственный код. Но это предприятие довольно сложно выполнить, поскольку Java и Objective C / Swift являются строго типизированными языками, а Javascript нет, всё это будет в курсах react native уроки на русском.

Вместо этого RN делает что-то умнее: React Native — это, по сути, набор компонентов React , где каждый из них имеет свой соответствующий эквивалент в views и собственных компонентах.

Например, собственный компонент TextInput имеет свой соответствующий в RN, который может быть импортирован в код JS и использоваться в качестве любого компонента React. Следовательно, программист внешнего интерфейса пишет код, как если бы он разрабатывал сайт в ReactJS. Есть три компонента ‘behind the scenes’ при запуске RN app:

1. Собственные модули / коды: это все необходимые модули (как для iOS, так и для Android), поэтому, когда мы делаем наше приложение RN, нам не нужно беспокоиться о написании собственного кода.
2. Javascript VM: это виртуальная машина Javascript, которая будет запускать наш JS-код. Как на iOS , так и на Android используется JavascriptCore, который является движком Javascript, который использует Webkit для Safari. Эта часть программного обеспечения уже включена в устройства iOS, но не на Android. Таким образом, RN будет упаковывать эту часть внутри apk, увеличивая размер на 3-4 мегабайта.
3. React Native Bridge CC: это мост React Native, написанный на C++ / Java, и отвечает за передачу потоков Javascript и Native. Они разговаривают друг с другом в протоколе сообщений.

Меньше теории, давайте соберем окружающую среду и выбросим код!

Есть в основном два способа работы с React Native:

1. Официальный: мы выполняем его, устанавливая утилиту node create-react-native-app и устанавливая на мобильном телефоне Expo app для просмотра приложений, которые разрабатываются. С помощью этого способа вам могут потребоваться настройки собственного кода (XCode/Android Studio), особенно при выпуске и публикации приложения. Таким образом, это требует некоторого знания родных платформ или, по крайней мере, иметь близкого партнера, знающего об этом.
2. Другой способ: использовать Expo, который образует группу разработчиков, которые создали набор инструментов, которые облегчают работу с React Native. Например, с помощью инструмента командной строки Expo CLI можно создать приложение RN ‘from scratch’.

С Expo тестирование на тренажерах и устройствах становится проще. Кроме того, они распространяют библиотеку Expo SDK, которая позволяет легко интегрировать мобильные возможности, такие как Push Notifications, Facebook login, Instant updating и т. д всё в курсах react native уроки для начинающих.

У вас также есть возможность публиковать свои приложения под URL-адресами, которыми вы можете легко поделиться. И, прежде всего, это полностью изолирует программиста от знания родных языков программирования.

Во всех случаях вы получаете QR-код, который, сканируя его из Expo App, вы можете запустить наш код на физических устройствах .

У нас также есть преимущества горячей перезагрузки и отладки с Chrome. Отладка с помощью Chrome достигается путем выполнения JS-кода внутри Chrome, а не в JavascriptCore, и взаимодействия с родными модулями через Websocket.

react native text

Чтобы мы увидели некоторый код и убедили вас, что в конце концов все запрограммировано так, как если бы это было веб-приложение в React, мы сделали простое приложение, которое перемещается между двумя экранами с текстовым контентом и изображениями:

App.js

import React from ‘react’;
import FirstScreen from ‘./src/components/FirstScreen’;
import SecondScreen from ‘./src/components/SecondScreen’;
import { createStackNavigator } from ‘react-navigation’;
const RootStack = createStackNavigator({
First: { screen: FirstScreen },
Second: { screen: SecondScreen },
},
{
initialRouteName: ‘First’,
});
export default class App extends React.Component {
render() {
return <RootStack />;
}
}

import React from 'react';
import { StyleSheet, Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';
import AnsHeader from './AnsHeader';
export default class FirstScreen extends React.Component {
onPressNext() {
const { navigate } = this.props.navigation;
navigate('Second');
}
render() {
return (
<View style={styles.container}>
<AnsHeader />
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>What is Agile?</Text>
<Image resizeMode='contain' style={{ width: Dimensions.get('window').width - 50, height: 200 }} source={{ uri: 'http://www.agilenutshell.com/assets/what-is-agile/incrementally-over-all-at-once.png' }} />
<Text style={{ padding: 10 }}>Agile is a time boxed, iterative approach to software delivery
that builds software incrementally from the start of the project, instead of trying to deliver
it all at once near the end.</Text>
</View>
<TouchableOpacity onPress={this.onPressNext.bind(this)}>
<View style={{ width: 150, marginBottom: 10, backgroundColor: '#dcdcdc', alignItems: 'center', borderRadius: 10 }}>
<Text style={{ margin: 15 }}>Learn More</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-between',
},
});

Мы сделали это с официальным путем: используя create-react-native-app и ТОЛЬКО используя в качестве сторонних библиотек React Navigation для реализации навигации между двумя экранами и react хуки жизненного цикла.

Flexbox для макета макетов и CSS для стилей

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

Что касается стиля компонентов, нет специального синтаксиса. Все компоненты ядра RN принимают property «style». Значения, которые могут быть вставлены в style, почти всегда имеют эквивалентность тому, как CSS работает в интернете , за исключением того, что имена написаны с использованием camel case, то есть backgroundColor вместо background-цвета.

Пример:

<View style={{ width: 150, marginBottom: 10, backgroundColor: '#dcdcdc', alignItems: 'center', borderRadius: 10 }}>
<Text style={{ margin: 15 }}>Learn More</Text>
</View>

В качестве примера более продвинутого и разработанного приложения с Expo вы можете проверить Marvel Oldies app на Github.

Доступно только для Android, Если вы установите приложение Expo, вы можете попробовать его с помощью этого QR-кода:

И вы также можете скачать приложение из Play Store .

В этом случае, когда он был разработан с Expo, в дополнение к тому, что рабочий процесс был более удобным , при публикации приложения в Google Play Store было проще, особенно при подписании apk и react components library.

Мой опыт разработки приложения RN

После некоторого времени разработки приложения RN, вот мои выводы:

• Рабочая среда является дорогостоящей для установки (с Expo это время сокращается).
• Рабочий процесс не такой плавный , как в интернете, hot reloading и debugging еще не такие плавные. Тренажеры время от времени зависают.
• Это не 100% кросс-платформенный — обещание писать Javascript и вести себя одинаково для iOs и Android не совсем верно. В документации есть много properties, где разница между платформами и вам нужно, в некоторых случаях, использовать Platform, чтобы получить тот же вид на обеих платформах. Пример:

style: {
marginTop: Platform.OS === 'ios' ? 40 : 30
}