Среды разработки сложных систем никогда не были простыми сами по себе. Разработка под мобильные платформы iOS и Android не исключение. У каждого вендора есть своя среда, это Xcode для Apple и Android Studio для Google.
Установкой сред дело не ограничивается. Еще нужно скачать и установить компоненты, создать виртуальные устройства для теста и многое другое вроде SDK. Прекрасно помню, как делал это впервые, даже с учетом наличия всяких Stack OverFlow и документации самих вендоров я потратил на это весь рабочий день.
Если вы только знакомитесь с библиотекой React, сегодня нет особого смысла заморачиваться с установкой всех этих сред благодаря такой компании как Expo.io
Знакомьтесь, Expo
Да шучу я, не то Expo. Наше Экспо чуток скромнее в пафосе, но от этого не менее пользы от него не меньше. Настолько, что весь Expo.io мы сегодня не рассматриваем, а только Expo Snack, который можно просто окрестить как React Native в вашем браузере:
Эта среда позволяет попробовать свои силы в программировании на React Native:
Среда представляет собой 4 секции — файловый менеджер, непосредственно среда с кодом, далее есть встроенные компоненты Expo.io. Тут кстати много интересный няшек, например есть Google API, я могу подключить его и скажем авторизоваться в мое приложение посредством Google Account. Вот так.
Сначала подключим компоненты из Expo:
import { Constants, Google } from 'expo';
Теперь немного покодим (код чуток отличается от дефолтного, мне тут захотелось получить еще и userID):
export default class App extends Component {
_handleGoogleLogin = async () => {
try {
const { type, user } = await Google.logInAsync({
androidStandaloneAppClientId: '<ANDROID_CLIENT_ID>',
iosStandaloneAppClientId: '<IOS_CLIENT_ID>',
androidClientId: '603386649315-9rbv8vmv2vvftetfbvlrbufcps1fajqf.apps.googleusercontent.com',
iosClientId: '603386649315-vp4revvrcgrcjme51ebuhbkbspl048l9.apps.googleusercontent.com',
scopes: ['profile', 'email']
});
switch (type) {
case 'success': {
Alert.alert(
'Logged in!',
`Hi ${user.name}! Ваш ID ${user.id}! Ваша адрес почты ${user.email}! Ваш токен ${user.tagline}` ,
);
break;
}
case 'cancel': {
Alert.alert(
'Cancelled!',
'Login was cancelled!',
);
break;
}
default: {
Alert.alert(
'Oops!',
'Login failed!',
);
}
}
} catch (e) {
Alert.alert(
'Oops!',
'Login failed!',
);
}
};
А в секцию render() добавляем:
<Button
title="Login with Google"
onPress={this._handleGoogleLogin}
/>
И получается такая красота:
Автор этого поста советует вам обзавестись бесплатным аккаунтом на https://appetize.io/signup чтобы не ждать очереди на виртуальные устройства. После регистрации у Вас будет возможность запускать до 2х устройств одновременно и бесплатно (в рамках 120 минут в день).
Список всех встроенных компонентов в Expo Snack:
Accelerometer— управление датчиком ускорения вашего смартфона;ActivityIndicator— обычный спин, чтобы вашему пользователю не было скучно, пока вы что-то откуда-то получаете. Что приятно <ActivityIndicator size=»small» /> генерит правильные спины для обоих версий приложений.Audio— плеер звуковых файлов, поддерживает не только mp3;BarCodeScaner— собственно, всем понятно, что это встроенный сканер штрих-кодов;Button— аккуратная кнопка для обеих платформ с кликабельной областью пр.;Facebook Login— авторизация с помощью FB профиля в вашей апе;Google Login— авторизация с помощью Google Account в ваше приложение;Image— вставляет картинку в приложение. Кстати, жаль, но загрузить картинку в Snack нельзя, только внешний источник;Video— видео с внешнего источника. Еще раз, т.к. это Expo Snack и это «игрушка», то закачать видео в саму среду разработки не выйдет.TextInput– ввод текста. Что тут еще добавить?Svg— добавление в приложение svg векторной графики. С тех пор как разрешения экранов мобильных устройств стало очень быстро догонять десктопы, а временами и перегонять, то векторная графика для UI очень пригодилась;MapView— интересный компонент, т.к. для Android будет использовано Google Maps, а для iOS — Apple Maps;Location— получение от устройства геолокации: GPS координаты и др.
ESLint в комплекте
Не было б такой популярности у Snack, если бы в комплекте не поставлялся ESLint. Я люблю этой линтер за понятность, строгость только там, где она нужна и хороший функционал.
Вы всегда узнаете, где поставили лишнюю фигурную скобку, подключили, но не компонент или стиль.
Итого
Expo Snack имеет как и все в этом мире свои плюсы и минусы. К плюсам безусловно можно отнести возможность кодить в браузере, пробовать какие-то фишки и вообще трепетно погружаться в мир библиотеки React.
К минусам можно отнести, что это похоже на создание полноценного сферического коня в вакууме. Вы вряд ли сможете использовать потом этот код в продакшене, т.к. найти компоненты Expo в свободном доступе (npm репозиторий например) не представляется возможным. Да что это за приложение, которое нужно запускать внутри другого приложения?
Желаю вам познавательного кодинга!
P.S. Некоторые умные люди подсказали, что Snack можно использовать на собеседованиях для проверки уровня знаний кандидата.
