Разрабатываем приложение на React Native

Содержание:

Разработка программ на React Native последние пять лет пользуется популярностью. На нем пишутся как простые, так и сложные программы. В данном материале вы узнаете, как создать свою первую программу. Рассмотрим полный процесс написания и его компоненты.

Краткая информация по React Native

По сути, это фреймворк. С помощью него разрабатываются приложения для Android и iOS.Немного фактов:

  • фреймворк появился в первой половине 2015 года;
  • его базой является React;
  • он не использует HTML и WebView;
  • Android поддерживается хуже, чем iOS;
  • нативные компоненты с биндингами JavaScript и обернуты в React;

Создаем приложение

Прежде всего, нужен плагин npx. Он идет в комплекте с Node.js и Android Studio. Для теста программы на iOS нужна утилита Xcode.Для начала создаем основу с помощью команды npx react-native init RandomGuysApp.Через время создается папочная система.Разрабатываем приложение на React NativeВ консоли записывается следующее: yarn add @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view.Команда устанавливает навигационную библиотеку, которая позволяет делать переход с экрана на экран в программе.Если по окончании установки программа не будет запускаться на iPhone, тогда в папке ios прописываем pod install.В index.js указано: AppRegistry.registerComponent(appName, () => App);App- это точка входа в программу.Разрабатываем приложение на React NativeСоздаем роутер. В момент нажатия в браузере на URL идет добавление переходов в корзину истории. Когда пользователь нажимает на кнопку возвращения, браузер делает удаление из стека последнего посещения сайта.Создаем папку navigation, и внутри нее файл RootNavigator.js, куда вставляем:import * as React from 'react';import {createStackNavigator} from '@react-navigation/stack';import {PersonListScreen} from '../screens/PersonListScreen';const Stack = createStackNavigator();export const RootNavigator = () => {return (<Stack.Navigator initialRouteName={'list'}><Stack.Screen name={'list'} component={PersonListScreen} /></Stack.Navigator>);};Несколько замечаний:

  • элемент ListScreen пока не прописан;
  • приложение упрощено по структуре. Связано это с тем, что в программе будет 2 экрана.

Здесь создается навигационный стек, там будет указан перечень экранов.Начинаем создавать первое окно для дисплея. Добавляем папку screens, в ней создаем PersonListScreen.Разрабатываем приложение на React NativeВставляем в созданный файл:import React, {Component} from 'react';import {FlatList, View, StyleSheet} from 'react-native';import {PersonListItem} from '../components/PersonListItem';export class PersonListScreen extends Component {state = {list: [],isLoading: false,};componentDidMount = () => {this.onRefresh();};getMoreData = (isRefreshing) => {};onRefresh = () => {this.getMoreData(true);};onScrollToEnd = ({distanceFromEnd}) => {if (distanceFromEnd < 0) {return;}this.getMoreData(false);};onItemPress = (item) => {this.props.navigation.navigate('info', {person: item});};keyExtractor = (person) => person.login.uuid;renderItem = ({item}) => {return (<PersonListItemperson={item}onPress={this.onItemPress.bind(this, item)}/>);};render = () => {const {isLoading, list} = this.state;return (<View style={styles.container}><FlatListdata={list}renderItem={this.renderItem}keyExtractor={this.keyExtractor}refreshing={isLoading}onRefresh={this.onRefresh}onEndReached={this.onScrollToEnd}onEndReachedThreshold={0.2}/></View>);};}PersonListItem пока не прописано. FlatList помогает в отрисовке перечней, имеет поддержку прокручивания к части по индексу PullToRefresh.В renderItem идет передача частей из массива data и потом происходит возвращение списковой части. KeyExtractor аналогичен key в виде значения, которое вызывается для каждой части.Когда происходит переход на страницу, планируется получать перечень людей с отображением. Когда перечень идет вниз, то он обновляется и при достижении его окончания должна произойти подгрузка данных. Возвращаемся к PersonListItem и добавляем components в PersonListItem.js, заполняем этим:import React, {Component} from 'react';import {StyleSheet, TouchableOpacity, Image, Text, View} from 'react-native';export class PersonListItem extends Component {render = () => {const {onPress, person} = this.props;return (<TouchableOpacity style={styles.container} onPress={onPress}><Imagesource={{uri: person.picture.medium}}resizeMode={'contain'}style={styles.avatar}/><View style={styles.col}><Text style={styles.name}>{person.name.first} {person.name.last}</Text><Text style={styles.email}>{person.email}</Text></View></TouchableOpacity>);};}const styles = StyleSheet.create({container: {flexDirection: 'row',alignItems: 'center',padding: 12,borderBottomColor: '#b0b0b0',borderBottomWidth: 0.4,},avatar: {width: 50,height: 50,borderRadius: 25,},col: {marginLeft: 10,},name: {fontSize: 16,color: '#2e2e2e',},email: {marginTop: 10,fontSize: 13,color: '#b0b0b0',},});Взамен пикселей идут числа. Так получается, потому что стандартно в качестве измеряемой единицы применяется dp а для отрисовки в px используем PixelRatio.getPixelSizeForLayoutSize().Возвращаемся к app.js. Заменяем его внутренность этим:import React, {Component} from 'react';import {SafeAreaView} from 'react-native';import {NavigationContainer} from '@react-navigation/native';import {RootNavigator} from './navigators/RootNavigator';export class App extends Component {render = () => {return (<SafeAreaView><NavigationContainer><RootNavigator /></NavigationContainer></SafeAreaView>);};}const styles = StyleSheet.create({container: {flex: 1,},});Применяем маршрутизатор для работы поиска. В коде применяется элемент SafeAreaView, нужный для отрисовки файлов во внутренней части зон дисплея и чтобы контент не накладывался на монобровь в Айфон Х.

Собираем и запускаем

Для сборки и запуска желательно применять Xcode. Когда открываем проект, указываем файл ios/RandomGuysApp.xcworkspace. Если Андрoид, то открываем папку android в Android Studio, IDE само сделает установку нужного программного обеспечения. Затем вводим в корневой папке проекта npx react-native run-android.После запуска появится это:Разрабатываем приложение на React NativeЭто дисплей list, зарегистрированный в навигаторе. Для отрисовки в нем возвращаемся в PersonListScreen.js, и добавляется getMoreData().getMoreData = (isRefreshing) => {const limit = 15;const offset = isRefreshing ? 0 : this.state.list.length;const page = Math.ceil(offset / limit) + 1;fetch(`https://randomuser.me/api/?seed=foobar&results=15&page=${page}`) .then((r) => r.json()) .then((json) => {this.setState({ list: isRefreshing? this.state.list.concat(json.results): json.results,}); }) .catch((e) => {console.log(e); }); };Используем react-native-debugger для регулировки программы. Запускается сочетанием ctrl(cmd) + M для Андроид, cmd + D для IOS.Сверху к import добавляем элемент StyleSheet.import {FlatList, View, StyleSheet} from 'react-native';Снизу добавляетсяconst styles = StyleSheet.create({container: { flex: 1,}, });Добавляем это к View. Выходит такое, что на скриншоте ниже.Разрабатываем приложение на React NativeВо время прокрутки дисплея вниз перечень начинает делать обновление, во время прокрутки — список догружается.Делаем функцию входа в профиль человека.onItemPress = (item) => {this.props.navigation.navigate('info', {person: item});};Это вход в окно info с передачей человека как информации.Далее дисплей добавляется в RootNavigator.js, и пишем следующее:...import {PersonInfoScreen} from '../screens/PersonInfoScreen';...<Stack.Screen name={'list'} component={PersonListScreen} /><Stack.Screen name={'info'} component={PersonInfoScreen} />...Создаем src/screens/PersonInfoScreen.js и добавляем:import React, {Component} from 'react';import {StyleSheet, View, Image, Text} from 'react-native';export class PersonInfoScreen extends Component {renderRow = (cells) => {return cells.map((cell) => (<View style={styles.cell} key={cell.title}><Text style={styles.cellTitle}>{cell.title}</Text><Text style={styles.cellValue}>{cell.value}</Text></View>));};render = () => {const {person} = this.props.route.params;return (<View style={styles.container}><Imagesource={{uri: person.picture.large}}style={styles.avatar}resizeMode={'contain'}/>{this.renderRow([{title: 'login', value: person.login.username},{title: 'name', value: person.name.first},{title: 'surname', value: person.name.last},{title: 'email', value: person.email},{title: 'phone', value: person.cell},])}</View>);};}const styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',},avatar: {width: 100,height: 100,borderRadius: 50,marginTop: 20,},cell: {marginTop: 15,justifyContent: 'center',alignItems: 'center',},cellTitle: {fontSize: 13,color: '#b0b0b0',},cellValue: {marginTop: 10,fontSize: 16,color: '#2e2e2e',},});Получаем вывод на дисплей.Разрабатываем приложение на React NativeМы создали программу для просмотра информации по людям.

Вопрос — Ответ

Где применяется JavaScriptCore?Он используется везде, где есть операционные системы iOS и Android.В React Native применяется DOM API?Нет, он совсем не применяется.RN кроссплатформенная?Да, это ее отличительная черта.Выше было подробно рассмотрено, как создать программу на React Native. Если вы новичок и планируете углубиться в создание приложений, то у нас есть для вас интересное предложение.Скоро будет проходить курс по “Mobile React Native”. Вы разберете весь процесс создания программ для мобильных устройств, научитесь делать программирование как на простом уровне, так и на сложном.Подробности о курсе:

  • период прохождения курса: 4 месяца;
  • регулярность занятий: 5 раз в неделю;
  • продолжительность занятий: 4 часа.

Курс будут вести опытные программисты, которые научат не только программированию, но и профессиональным фишкам, ускоряющим разработку приложения.Вы освоите профессию программиста и станете высокооплачиваемым работником.Если вам не интересно программирование React Native, то вы можете посмотреть остальные курсы. Там предлагаются только актуальные материалы, которые помогут вам построить свою карьеру и реализовать себя как программиста.Не упускайте свой шанс. Записывайтесь прямо сейчас на курс и начинайте менять свою жизнь к лучшему.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!