React Native взгляд со стороны


Данная статья розчитана только на новичков. Если вы когда-то задумывались над тем стоит ли начинать разрабатывать кроссплатформенные приложения и не имели опыта работы с вебом, милости прошу.

Не большая предыстория.
До этого я разрабатывал игры и приложения на Unity и .Net под Windows, Android, iOS. И волей случая познакомился с React Native. На старте я не знал почти ничего и углубился в ресерч.


Что же я нашел на просторах интернета?
Что это такое вы можете прочитать тут

Выбор среды.
Здесь выбор большой, главное выбрать что-то удобное, самое главное выбор есть. Это Atom + Nuclide, sublime text, visual studio code, Web Storm. Если вы готовы платить 129$ в год, я думаю стоит остановиться на нем, если же нет, выберите удобную себе среду. Мой выбор пал на Visual studio code – так как я почти все время писал в visual studio. Так же там есть терминал, через который я могу запускать приложение на устройстве и т. д.

Какие языки и технологии используются?

Если вы верстальщик — то эта технология для вас. Главная бизнес логику нужно реализовывать на java script, для верстки вы можете использовать jsx и css. Jsx не особо отличается от hmtl, и те кто с ним знакомы, не должны столкнуться с трудностями.
Так же, в этом фреймворке используется react native.

Создание первого проекта
Здесь я воспользовался гайдом от разработчиков, который вы можете увидеть здесь. Далее открыл эту папку в visual studio code. Данный проект уже можно запустить и протестировать на устройствах. Я немного изменил код и в итоге получил вот такое

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

export default class App extends React.Component {

render() {
return (

<View style={styles.container}>
<PricingCard
color='#4f9deb'
title='Free'
price='$0'
info={['1 User', 'Basic Support', 'All Core Features']}
button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
/>

<Text>Hi, it`s app for anroid</Text>
<Text>CAMERA START</Text>
<Text></Text>

<Button
onPress={() => {
Alert.alert('You tapped the button!');
}}
title="Press Me"
color="#841584"
/>

<Button
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 4,
backgroundColor: '#FFE4C4',
alignItems: 'center',
justifyContent: 'center',
},
});


Как отображается страница? В чем разница с Web?
Вместо рендеринга в DOM браузер React Native вызывает ARI языка той платформы, на которую разрабатывается данное приложение. За это отвечает коннектор, который существует для каждой платформы.

Архитектура приложения
Приложение на react native состоит с двоих ассинхронных потоков. Первый Нативный отвечает за все функции системы, которые вы можете использовать в своем коде. Второй JS, который реализовывает бизнес логику приложения. Эти два потока связывает между собой бридж. Эти два потока не делят данные а используют синхронизированные сообщения. Смеха указана ниже.



Expo – это набор утилит, библиотек, сервисов, которые облегчают работу с React Native. Так же но позволяет использовать нативные функции операционной системы (камера, уведомление, контакты). Другими словами нам не нужно знать Objective C или Java чтобы внедрить это всё в ваше приложение.
Тестировать приложение достаточно легко. Вам необходимо сказать приложение Expo на ваше устройство в сторе и сканировать qr код, который вы получите после npm start в консоли. Так ваше приложение будет находится на сервере Amazon и вы сможете удобно тестировать на своем устройстве.

Моё мнение
Данный фреймворк идеально подойдет разработчикам которые знакомы с версткой, а лучше ещё с React в целом. Им будет проще всего освоиться и начать писать готовые приложения. Однако как по мне, это идеальная технология чтобы сделать кроссплатформенный прототип, который займет меньше времени и будет работать как на iOS так и Android.

Метериалы: wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182d008f5e




К сожалению, не доступен сервер mySQL