В последние годы React (библиотека JavaScript, созданная некоторыми крутыми инженерами Facebook) была фреймворком goto для кроссплатформенной разработки из-за его большого преимущества - отличного опыта разработчика / пользователя React. Описанный его создателями как «библиотека JavaScript для создания пользовательских интерфейсов», React фокусируется на части представления вашего приложения. Говоря более конкретно, это означает, что при написании приложения React Native код вашего представления будет состоять из написания компонентов React, которые представляют собой небольшие фрагменты кода, которые описывают, как часть вашего приложения должна выглядеть на основе некоторого набора входных данных. Давайте посмотрим на небольшой пример компонента, который можно использовать для отображения простой кнопки. (стили будут опущены для ясности.)
const Button = React.createClass({propTypes: {onPress: React.PropTypes.func.isRequired,text: React.PropTypes.string.isRequired,},render() {return (<TouchableOpacity onPress={this.props.onPress} style={...}><Text style={...}>{this.props.text}</Text></TouchableOpacity>);}});
Компонент button содержит две части входных данных: onPress, функцию обратного вызова для обработки события нажатия кнопки; и text - строка, отображаемая внутри кнопки. XML -подобная структура, возвращаемая функцией render, называется JSX, синтаксическим сахаром для вызовов функций в React. А TouchableOpacity и Text - это просто существующие компоненты, включенные в React Native. Теперь, когда компонент Button создан, его можно многократно использовать во всем приложении с согласованным поведением и стилем.
Этот простой пример демонстрирует, как создаются приложения React Native, шаг за шагом и компонент за компонентом; вы можете создавать компоненты, представляющие возрастающие уровни абстракции, которые позже превращаются в большую базу кода. Например, вы можете создать ButtonGroup компонент, содержащий несколько связанных кнопок. И, опираясь на это, вы можете писать компоненты, представляющие целые экраны. Даже когда ваше приложение становится больше, компоненты остаются понятными и управляемыми по размеру на каждом уровне.
Что такое родной фреймворк
Если вы пишете приложения с помощью Android Studio, вы сразу узнаете многие компоненты React Native. Компоненты React Native больше похожи на классы в ваших кодах Java для обработки событий XML. Главная особенность React - упрощение создания многофункциональных пользовательских интерфейсов, когда она изначально была запущена для Интернета, делала уровень представления вашего приложения чистым выводом состояния. Как разработчик, это означает, что вместо того, чтобы вносить изменения в компоненты представления (например, программно изменять текст или цвет кнопки, вызывая на ней функцию), вы просто определяете, как должно выглядеть ваше представление на основе введенных данных. data, и React разумно вносит изменения за вас при изменении состояния. Отлично, правда?
Определения компонентов React Native ведут себя почти так же, как React для веб-компонентов, но нацелены на виджеты собственного интерфейса, а не на HTML. Таким образом, вместо использования <div> вы должны использовать <View> (который на iOS рендерится в родной UIView, а на Android - android.view). Когда данные ваших компонентов изменяются, React Native вычислит, что в вашем представлении необходимо изменить, и сделает необходимые вызовы для любых отображаемых виджетов собственного пользовательского интерфейса. И что удивительно, JavaScript и React Native более чем способны поддерживать работу вашего приложения со скоростью 60 кадров в секунду.
P.S: React Native помогает разработчикам создавать потрясающие нативные приложения, которые понравятся их клиентам, без увеличения бюджета, которое может повлечь за собой создание двух отдельных приложений.
Любите фреймворк? Давайте настроимся с помощью React
React Native использует среду выполнения JavaScript Node.js для создания вашего кода JavaScript. Если у вас еще не установлен Node.js, пора его установить!
Для Mac установите Homebrew, следуя инструкциям на веб-сайте Homebrew, затем установите Node.js, выполнив следующие действия в окне Терминала:
brew install node
А для Windows установите chocolatey, следуя инструкциям на сайте Chocolatey, а затем установите Node с помощью команды:
choco install nodejs.install
Затем с помощью homebrew установите watchman, средство просмотра файлов от Facebook:
brew install watchman
Это используется React Native, чтобы выяснить, когда ваш код изменится, и соответствующим образом перестроить. Это похоже на то, как если бы Xcode (в MacOS) выполнял сборку каждый раз, когда вы сохраняете файл.
Затем используйте npm для установки инструмента React Native Command Line Interface (CLI):
npm install -g react-native-cli
При этом используется Диспетчер пакетов узлов (npm) для получения инструмента CLI и его глобальной установки, как и Yarn.
Или пряжа:
yarn global add react-native-cli
Перейдите в папку, в которой вы хотите разработать приложение React Native, и используйте инструмент CLI для создания проекта:
react-native init AppName
Это создает стартовый проект, содержащий все, что вам нужно для создания и запуска приложения React Native. Если вы посмотрите на созданные папки и файлы, вы найдете папку node_modules, которая содержит фреймворк React Native. Вы также найдете файл index.android.js, который представляет собой скелет приложения, созданный с помощью инструмента CLI. Существует также папка android, содержащая проект Android Studio и небольшой объем кода, необходимый для «начальной загрузки» вашего приложения. Наконец, есть аналоги для iOS. Находясь в папке проекта, запустите react-native run-ios (iOS) или react-native run-android (для Android), чтобы собрать проект React Native; Еще лучше запустить команду: yarn start (для пользователей Yarn), а пользователям npm следует выполнить команду npm start.
После этого вы должны заметить упаковщик React Native, работающий под node. Ниже приведен фрагмент работающего React Native Packager. Вы скоро узнаете, что он делает.
┌──────────────────────────────────────────────┐ │ Running packager on port 8081. │ │ │ │ Keep this packager running while developing on any JS projects. │ │ Feel free to close this tab and run your own packager instance if │ │ you prefer. │ │ │ │ https://github.com/facebook/react-native │ │ │ └──────────────────────────────────────────────┘ Looking for JS files in /Users/bashirk/Desktop/React/AppName [6:15:40 PM] <START> Building Dependency Graph [6:15:40 PM] <START> Crawling File System [6:15:40 PM] <START> Loading bundles layout [6:15:40 PM] <END> Loading bundles layout (0ms) [Hot Module Replacement] Server listening on /hot React packager ready. [6:15:41 PM] <END> Crawling File System (747ms) [6:15:41 PM] <START> Building in-memory fs for JavaScript [6:15:42 PM] <END> Building in-memory fs for JavaScript (653ms) [6:15:42 PM] <START> Building in-memory fs for Assets [6:15:42 PM] <END> Building in-memory fs for Assets (277ms) [6:15:42 PM] <START> Building Haste Map [6:15:42 PM] <START> Building (deprecated) Asset Map [6:15:42 PM] <END> Building (deprecated) Asset Map (49ms) [6:15:42 PM] <END> Building Haste Map (400ms) [6:15:42 PM] <END> Building Dependency Graph (2094ms)
Скажи привет React Native
Прежде чем приступить к созданию вашего приложения мирового класса, мы собираемся создать очень простое приложение Hello World для тестирования вашей среды React. По мере продвижения вы познакомитесь с различными компонентами и концепциями.
Во-первых, откройте index.android.js в любом текстовом редакторе и удалите текущее содержимое, поскольку вы собираетесь создать собственное приложение с нуля. Добавьте в начало файла следующее:
'use strict';
Это включает строгий режим, который добавляет улучшенную обработку ошибок и отключает некоторые неидеальные языковые функции JavaScript.
Затем добавьте следующие строки:
var React = require('react');
var ReactNative = require('react-native');
Это загружает модули react и react-native и назначает их переменным, называемым React и ReactNative. React Native использует ту же технологию загрузки модулей, что и Node.js, с функцией require, что примерно эквивалентно связыванию и импорту библиотек в Swift или Android Studio.
Под оператором require добавьте следующее:
var styles = ReactNative.StyleSheet.create({
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
}
});
Это определяет единый стиль, который вы вскоре примените к тексту Hello World. Если вы раньше занимались веб-разработкой, вы, вероятно, узнаете эти названия свойств. Класс React Native StyleSheet, используемый для стилизации пользовательского интерфейса приложения, аналогичен Каскадным таблицам стилей (CSS), используемым в Интернете.
Теперь о самом приложении! Продолжая работать с тем же файлом, добавьте следующий код сразу под объявлением стиля выше:
class MyClass extends React.Component {
render() {
return React.createElement(ReactNative.Text, {style: styles.text}, "Hello World!");
}
}
Это класс JavaScript!
MyClass расширяет React.Component, основной строительный блок пользовательского интерфейса React. Компоненты содержат неизменяемые свойства, изменяемые переменные состояния и предоставляют метод для рендеринга. Ваше текущее приложение довольно простое и требует только метода рендеринга.
Компоненты React Native не являются классами UIKit; вместо этого они являются легким эквивалентом. Фреймворк заботится о преобразовании дерева компонентов React в требуемый собственный пользовательский интерфейс.
Наконец, добавьте в конец файла следующее:
ReactNative.AppRegistry.registerComponent('MyClassNo', function() { return MyClass });
AppRegistry определяет точку входа в приложение и предоставляет корневой компонент.
Сохраните изменения в index.android.js, а затем вернитесь в Android Studio. Убедитесь, что схема AppName выбрана с помощью одного из симуляторов Android, а затем соберите и запустите свой проект. Через несколько секунд вы увидите, как работает ваше приложение Hello World:
Отличный опыт разработчика React
Высокопроизводительные разработчики - счастливые разработчики. При разработке в некоторой среде разработки, такой как Android Studio, вам постоянно приходится ждать, пока ваше приложение скомпилируется и перезапустится, при внесении каких-либо изменений; но с React любые изменения базы кода в React Native вносятся в ваше работающее приложение без необходимости перезапускать приложение.
React Native использует flexbox для создания макетов приложений. Хотя у каждого механизма компоновки есть своя кривая обучения, взлеты и падения, поддержка Flexbox в React Native означает, что вы можете напрямую использовать один и тот же код макета для Android, iOS и Интернета вместо изучения трех разных движков.
Вывод
Благодаря простоте разработки, качеству приложений, созданных с помощью React, и богатству платформы и экосистемы, вы получите массу удовольствия от обучения и создания с React Native. И в любом случае, если вы хотите узнать больше, переходите на официальную страницу React Native! Удачного кодирования!
