Строим свое первое мобильное приложение на React Native
Эта инструкция расскажет, как построить свое первое мобильное приложение на React Native. Если Вы ищете более серьезный пример действующего приложения, поищите его тут: makeitopen.com.
Настройка
React Native требует простую настройку, которую можно найти здесь http://facebook.github.io/react-native/releases/0.25/docs/getting-started.html#content.
После настройки необходимых зависимостей, есть 2 простые команды получить полностью настроенный проект React Native, подготовленный к разработке.
1 | npm install -g react-native-cli |
react-native-cli — это интерфейс командной строки, который сделает оставшуюся настройку. Он устанавливается через npm. Он установит строку react-native в качестве команды для терминала. Это единственное, что нужно сделать 1 раз.
1 | react-native init AwesomeProject |
Эта команда заберет исходный код React Native и его зависимости и затем создаст новый проект Xcode в папке AwesomeProject/iOS/AwesomeProject.xcodeproj (для iOS) и систему сборки AwesomeProject/android/app (для Android).
Обзор
В этой инструкции мы построим простую версию приложения Movies, которая загружает 25 фильмов, идущих в кинотеатрах и показывает их в ListView.
Запуск приложения в iOS
Откройте наш новый проект (AwesomeProject/ios/AwesomeProject.xcodeproj) в Xcode и просто запустите его командой ⌘+R. Это также запустит сервер Node, который активирует живую перезагрузку кода. С ней вы можете увидеть свои изменения, нажимая ⌘+R в симуляторе, а не перекомпилируя код в Xcode.
Запуск приложения на Android
В своем терминале перейдите в папку AwesomeProject и запустите команду:
1 | react-native run-android |
Это установит сгенерированное приложение на Ваш эмулятор или устройство, а также запустит сервер Node, который активирует живую перезагрузку кода. Чтобы увидеть Ваши изменения, Вы должны открыть меню rage-shake-menu (или встряхнуть устройство, или нажать на устройстве кнопку меню, нажать F2 или Page Up в эмуляторе, ⌘+M в Genymotion), и затем нажать Reload JS.
Привет, мир
1 | react-native init |
сгенерирует приложение с названием Вашего проекта, в данном случае AwesomeProject. Это простой пример приложения hello world. Для iOS Вы можете отредактировать файл index.ios.js, чтобы сделать изменения в приложении, и затем нажать ⌘+R в симуляторе, чтобы увидеть изменения. Для Android Вы можете отредактировать файл index.android.js для изменения приложения, а затем нажать Reload JS в меню rage shake menu, чтобы увидеть изменения.
Разметка данных
Перед тем, как мы напишем код для получения данных о фильмах с ресурса Rotten Tomatoes, давайте разметим немного данных, чтобы запачкать наши руки самим React Native. В Facebook мы обычно декларируем константы в шапке файлов JS, прямо перед импортами, но свободно добавляем следующую константу там, где хотим. В index.ios.js или
index.android.js :
1 2 3 | var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, ]; |
Отображаем (рендерим) фильм
Мы отобразим заголовок, год и превьюшку для фильма. Поскольку превью — это компонент Image в React Native, добавим Image в список импортов React ниже.
1 2 3 4 5 6 7 8 9 10 | import React, { Component, } from 'react'; import { AppRegistry, Image, StyleSheet, Text, View, } from 'react-native'; |
Сейчас изменим функцию отображения так, что мы будем выводить данные, упомянутые выше, а не «привет, мир».
1 2 3 4 5 6 7 8 9 10 | render() { var movie = MOCKED_MOVIES_DATA[0]; return ( {movie.title} {movie.year} ); } |
Нажмите ⌘+R / Reload JS и Вы должны увидеть слово «Title» перед «2015». Замечу, что Image ничего не выводит. Это произошло, так как мы не указали ширину и высоту изображения, которое мы хотим вывести. Это делается через стили. В процессе изменения стилей давайте почистим те стили, которые больше не будем использовать.
1 2 3 4 5 6 7 8 9 10 11 12 | var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, }, }); |
В заключения нам нужно применить этот стиль к компоненту Image:
1 |
Нажмите ⌘+R / Reload JS и теперь изображение должно отобразиться.
Добавим немного стилей
Замечательно, что мы вывели наши данные. Сейчас давайте сделаем, чтобы все смотрелось красивее. Я бы хотел разместить текст справа от картинки и сделать заголовок больше и отцентрированным:
1 2 3 4 5 6 7 | +---------------------------------+ |+-------++----------------------+| || || Title || || Image || || || || Year || |+-------++----------------------+| +---------------------------------+ |
Мы добавим еще один контейнер для вертикального и горизонтального расположения наших компонентов.
1 2 3 4 5 6 7 8 9 | return ( {movie.title} {movie.year} ); |
Изменилось не сильно много. Мы обернули контейнером тексты и затем переместили их справа от Изображения (Image). Смотрите, стили изменились так:
1 2 3 4 5 6 7 | container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, |
Мы используем FlexBox в макете — посмотрите этот замечательный гид https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , чтобы узнать про него больше.
В сниппете выше мы просто добавили flexDirection: ‘row’, что заставляет потомков нашего основного контейнера располагаться горизонтально, а не вертикально.
Сейчас добавим другой стиль в JS объект style:
1 2 3 | rightContainer: { flex: 1, }, |
Это означает, что rightContainer займет оставшееся место в родительском контейнере, которое не занято Image. Попробуйте в качестве эксперимента добавить backgroundColor в rightContainer и затем удалить flex: 1. Вы увидите, что это заставляет размер контейнера ровняться минимальному размеру, который имеют его потомки.
Теперь стилизуем текст:
1 2 3 4 5 6 7 8 | title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, |
В продолжение нажмите ⌘+R / Reload JS и Вы увидите обновленный вид приложения.
Подтягиваем реальные данные
Получение данных из API Rotten Tomatoes на самом деле не очень относится к изучению React Native. Поэтому свободно проходите этот раздел.
Добавьте следующие константы в начале файла (обычно ниже импортов), чтобы создать REQUEST_URL с помощью которого запрашиваются данные.
1 2 3 4 5 | /** * For quota reasons we replaced the Rotten Tomatoes' API with a sample data of * their very own API that lives in React Native's Github repo. */ var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; |
Добавьте некоторое состояние инициализации в наше приложение, и теперь мы сможем проверить this.state.movies === null, чтобы определить были ли загружены данные о фильмах или нет. Мы можем установить эти данные, когда возвращается ответ this.setState({movies: moviesData}). Добавьте этот код сразу перед функцией render внутри нашего класса React.
1 2 3 4 5 6 | constructor(props) { super(props); this.state = { movies: null, }; } |
Мы хотим послать запрос после того, как компонент заканчивает загрузку. componentDidMount — это функция компонентов React, которую React однажды вызовет, сразу после того, как компонент загрузится.
1 2 3 | componentDidMount() { this.fetchData(); } |
Сейчас добавим функцию fetchData, используемую выше, в наш главный компонент. Этот метод будет отвечать за управление получением данных. Все, что Вам нужно сделать — это вызвать this.setState({movies: data}) после прохождения цепочки promise, поскольку это путь, которым работает React. Он заключается в том что setState перезапускает триггеры перерисовки и затем функция рендеринга обнаруживает, что this.state.movies больше не равно null. Замечу, что мы вызываем done() в конце цепочки promise — всегда проверяйте, что вызываете done() или любые появившиеся ошибки будут «проглочены».
1 2 3 4 5 6 7 8 9 10 | fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ movies: responseData.movies, }); }) .done(); } |
Сейчас модифицируем функцию render, чтобы отобразить загружающийся вид, когда у нас нет данных о фильмах и отображать первый фильм в противном случае.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | render() { if (!this.state.movies) { return this.renderLoadingView(); } var movie = this.state.movies[0]; return this.renderMovie(movie); } renderLoadingView() { return ( Loading movies... ); } renderMovie(movie) { return ( {movie.title} {movie.year} ); } |
Сейчас нажмите ⌘+R / Reload JS и Вы будете видеть «Loading movies…», пока возвращается ответ, а затем отобразится первый фильм, загруженный с Rotten Tomatoes.
ListView
Сейчас давайте изменим это приложение, чтобы вывести все данные в компонент ListView, а не просто показать первый фильм.
Почему ListView лучше, чем просто рендеринг всех этих элементов или помещения их в ScrollView? Не смотря на то, что React является быстрым, отображение возможно бесконечного списка элементов может быть медленным. ListView планирует рендеринг видов (views) так, что Вы просто показываете их на экране, и они уже отрисованы. А вне экрана они удаляются из иерархии нативных видов.
Сначала первая вещь: добавляем импорт ListView в шапку файла.
1 2 3 4 5 6 7 8 9 10 11 | import React, { Component, } from 'react'; import { AppRegistry, Image, ListView, StyleSheet, Text, View, } from 'react-native'; |
Сейчас изменим функцию render так, что, когда однажды мы получим данные, она отобразит ListView с несколькими фильмами вместо одного фильма.
1 2 3 4 5 6 7 8 9 | render() { if (!this.state.loaded) { return this.renderLoadingView(); } return ( ); } |
dataSource — это интерфейс, который ListView использует, чтобы определить, какие строки были изменены во время обновлений.
Вы заметите, что мы использовали dataSource из this.state. Следующий шаг — добавить пустой dataSource в объект, возвращаемый конструктором. Кроме того, так как теперь мы храним данные в dataSource, мы не должны больше использовать this.state.movies, чтобы избежать сохранения данных в двух местах. Мы можем использовать булево значение состояния (this.state.loaded), чтобы указать, закончилось ли получение данных.
1 2 3 4 5 6 7 8 9 | constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; } |
И вот модифицированный метод fetchData, который соответственно обновляет состояние:
1 2 3 4 5 6 7 8 9 10 11 | fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies), loaded: true, }); }) .done(); } |
в заключение мы добавим стили для компонента ListView в объект JS styles:
1 2 3 4 | listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, |
Здесь еще есть определенная работа, которую нужно сделать для создания полнофункционального приложения, такая как : добавление навигации, поиск, бесконечная подгрузка скроллинга, и т.д. Возьмите пример приложения Movies https://github.com/facebook/react-native/tree/master/Examples/Movies, чтобы увидеть, как оно работает.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | /** * Sample React Native App * https://github.com/facebook/react-native */ import React, { Component, } from 'react'; import { AppRegistry, Image, ListView, StyleSheet, Text, View, } from 'react-native'; var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; class AwesomeProject extends Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; } componentDidMount() { this.fetchData(); } fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies), loaded: true, }); }) .done(); } render() { if (!this.state.loaded) { return this.renderLoadingView(); } return ( ); } renderLoadingView() { return ( Loading movies... ); } renderMovie(movie) { return ( {movie.title} {movie.year} ); } } var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, thumbnail: { width: 53, height: 81, }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); |
—
Данная статья — перевод с английского http://facebook.github.io/react-native/releases/0.19/docs/tutorial.html авторами сайта https://vremyait.com
Об авторе
Антон Банников
Дипломированный php-программист, linux и open source-энтузиаст. Разработчик запатентованной программы расчета физико-химических свойств солей. Опыт работы с языками программирования ~25 лет, опыт работы с сайтами ~ 21 год, опыт программирования на языке php ~17 лет. Опыт программирования на языке JS ~14 лет. Разработчик антивирусного сканера (php/jquery) и участник проекта быстрого интернет-магазина "F-Shop" (php/jquery).
