Разработчики 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 — это платформа, которая позволяет разработчикам развертывать собственные приложения для мобильных устройств с использованием 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:
- Собственные модули / коды: это все необходимые модули (как для iOS, так и для Android), поэтому, когда мы делаем наше приложение RN, нам не нужно беспокоиться о написании собственного кода.
- Javascript VM: это виртуальная машина Javascript, которая будет запускать наш JS-код. Как на iOS , так и на Android используется JavascriptCore, который является движком Javascript, который использует Webkit для Safari. Эта часть программного обеспечения уже включена в устройства iOS, но не на Android. Таким образом, RN будет упаковывать эту часть внутри apk, увеличивая размер на 3-4 мегабайта.
- React Native Bridge CC: это мост React Native, написанный на C++ / Java, и отвечает за передачу потоков Javascript и Native. Они разговаривают друг с другом в протоколе сообщений.
Меньше теории, давайте соберем окружающую среду и выбросим код!
Есть в основном два способа работы с React Native:
- Официальный: мы выполняем его, устанавливая утилиту node create-react-native-app и устанавливая на мобильном телефоне Expo app для просмотра приложений, которые разрабатываются. С помощью этого способа вам могут потребоваться настройки собственного кода (XCode/Android Studio), особенно при выпуске и публикации приложения. Таким образом, это требует некоторого знания родных платформ или, по крайней мере, иметь близкого партнера, знающего об этом.
- Другой способ: использовать Expo, который образует группу разработчиков, которые создали набор инструментов, которые облегчают работу с React Native. Например, с помощью инструмента командной строки Expo CLI можно создать приложение RN ‘from scratch’.
С Expo тестирование на тренажерах и устройствах становится проще. Кроме того, они распространяют библиотеку Expo SDK, которая позволяет легко интегрировать мобильные возможности, такие как Push Notifications, Facebook login, Instant updating и т. д всё в курсах react native уроки для начинающих.
У вас также есть возможность публиковать свои приложения под URL-адресами, которыми вы можете легко поделиться. И, прежде всего, это полностью изолирует программиста от знания родных языков программирования.
Курс react js для начинающих | Хуки, Классы, Redux
Во всех случаях вы получаете 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 />;
}
}
FirstScreen.js 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', }, }); Вы можете найти на этом Github всю информацию.
Мы сделали это с официальным путем: используя 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>
Пример применения react native
В качестве примера более продвинутого и разработанного приложения с 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 }
- Сообщество RN очень плодовито и имеет постоянные обновления (что на данный момент является хорошим симптомом). В следующем каталоге ресурсов RN вы можете проверить огромное количество доступных сторонних библиотек.
- Возможность интеграции компонентов RN в существующие собственные приложения очень интересна. То есть собственное приложение может быть выполнено с компонентами в RN и компонентами, требующими анимации или лучшей производительности в собственном коде.
- Expo SDK / XDE является лучшим выбором, чтобы не иметь необходимости когда-либо выбрасывать код из родных языков .
Скачать курс React Native. Полное руководство для мобильной разработки
Что в курсе? Ниже по ссылке.
https://www.udemy.com/course/react-native-complete-guide/
Короче говоря, react native предлагает создавать не слишком сложные приложения для iOs и Android с помощью Javascript, и прямо сейчас это безопасная ставка при принятии решения о кросс-платформенной разработке. Я надеюсь, что вы изучите ее и поделитесь опытом!