Хотите узнать, как писать приложения для Android? React Native – один из самых простых способов, который можно настроить с помощью Node.js на вашем компьютере
React Native позволяет создавать нативные мобильные приложения с помощью JavaScript и React, библиотеки пользовательского интерфейса, созданной Facebook. Это позволяет легко писать код для устройств Android и iOS без необходимости владения Java (Android) и C++/Objective C (iOS)
Вот все, что вам нужно знать, чтобы начать работу с React Native
Предварительные условия React Native
Если вы уже знакомы с React, то для начала работы с React Native вам потребуется не так уж много. Вам понадобится подключение к интернету, и вы должны иметь возможность подключиться к компьютеру по сети. Вы также можете ознакомиться с нашими руководствами по основам командной строки Linux или командной строки Windows для начинающих
Установка React Native
Установка React Native не может быть проще, но сначала вам потребуется установить Node.js
Мы обсуждали, что такое Node.js еще в 2013 году, но если коротко, то он позволяет писать ‘правильные’ настольные и серверные приложения с помощью JavaScript
Перейдите на страницу загрузки Node.js и выберите программу установки для Windows или macOS. Версии для Linux также доступны, но для их установки вам придется проделать немного больше работы
После загрузки запустите программу установки, примите лицензионное соглашение и установите. Вы получите не только Node.js, но и npm – менеджер пакетов JavaScript. С его помощью вы можете установить другие пакеты – например, React Native!
Самый простой способ начать использовать React Native – это программа командной строки create-react-native-app. Откройте новый терминал или консоль и используйте npm для установки:
npm install -g create-react-native-app
Если у вас возникла проблема с установкой create-react-native-app, то, возможно, вам нужно исправить разрешения npm
После установки вы готовы приступить к созданию приложения
Создание приложения простым способом
Теперь, когда вы установили create-react-native-app, вы можете создать свое первое приложение. Создайте новую папку для хранения вашего проекта и перейдите в нее в командной строке
Используйте утилиту create-react-native-app для создания вашего приложения. Эта команда создаст приложение под названием FirstAndroidApp :
create-react-native-app FirstAndroidApp
React Native создал для вас новую папку, основанную на имени вашего проекта (FirstAndroidApp). Перейдите в эту папку, а затем запустите:
npm start
Это запустит ваш сервер разработки
Вы увидите множество вариантов перезапуска сервера, а также QR-код и IP-адрес сервера. Теперь все готово для запуска на вашем телефоне
Запуск приложения на устройстве
Чтобы протестировать приложение на устройстве Android, вам нужно установить приложение Expo. Оно подключится к вашему компьютеру и загрузит ваше приложение. Любые изменения, которые вы сделаете, перезагрузят приложение. Это очень хорошо работает и является отличным способом разработки приложения
После установки Expo убедитесь, что ваш телефон находится в той же сети, что и компьютер. Он не будет работать в другой сети или за брандмауэром
Откройте приложение Expo и выберите Сканировать QR-код. Наведите камеру телефона на QR-код в командной строке, и через несколько секунд приложение появится на вашем телефоне. Вернувшись в командную строку, вы увидите несколько новых статусов. Они говорят о том, что приложение завершило создание и запущено на вашем устройстве
Давайте начнем писать код!
Привет, мир!
Внутри папки FirstAndroidApp React Native создал несколько файлов. Есть папка node_modules , в которой хранятся пакеты Node, которые вы можете установить для дополнения вашего приложения. Откройте App.js в вашем любимом текстовом редакторе
Этот файл содержит 24 строки кода. Есть несколько импортов, класс под названием App и stylesheet :
importReactfrom'react';
import { StyleSheet, Text, View }from'react-native';
exportdefaultclassAppextendsReactComponent{
render() {
return(
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:,
backgroundColor:'#fff',
alignItems:'center',
justifyContent:'center',
},
});Это может показаться сложным, но как только вы познакомитесь с синтаксисом React Native, все станет просто. Большая часть синтаксиса похожа на HTML и CSS
Давайте посмотрим на код глубже. Эти импорты гарантируют, что ваше приложение имеет доступ к необходимым компонентам React-Native, которые нужны ему для работы:
importReactfrom'react';
import { StyleSheet, Text, View }from'react-native'Фигурные скобки ( { StyleSheet, Text, View } ) указывают несколько файлов для импорта
У вас должен быть класс App. Внутри return находится код, который будет отображать ваш телефон. Эта разметка похожа на HTML, но состоит из пользовательских тегов React Native
Тег View – это место для хранения других контейнеров. Атрибут style={styles.container} настраивает это представление на использование таблицы стилей в нижней части файла
Внутри тега View находится несколько тегов Text. Вы должны поместить текст внутри тегов Text. Без этого React Native не будет работать
В самом низу находится объект styles , определяемый как константа. Это очень похоже на CSS, только имеет более объектно-ориентированный вид. Однако вам придется использовать специфический синтаксис React Native
Давайте изменим этот код. Давайте изменим цвета, а также текст
Внутри CSS измените backgroundColor на зеленый (или любой другой цвет, который вам нравится):
backgroundColor:'#4caf50'Обратите внимание, что шестнадцатеричный код должен находиться внутри одинарных кавычек. Давайте улучшим этот текст. Создайте новый стиль под названием text. Добавьте атрибуты color , fontSize и fontWeight :
text: {
color:'#fff',
fontSize:34,
fontWeight:'bold'
}Добавьте это под элементом контейнер через запятую:
conststyles = StyleSheet.create({
container: {
flex:,
backgroundColor:'#4caf50',
alignItems:'center',
justifyContent:'center',
},
text: {
color:'#fff',
fontSize:34,
fontWeight:'bold',
}
});Наконец, измените текст внутри класса App :
<Text style={styles.text}>Hello, World!</Text>Устанавливая атрибут style , вы указываете React Native стилизовать ваш текст в соответствии со стилями, определенными ранее в стиле text
Play Store Here We Come!
Хотя мы рассмотрели только самые основы, теперь у вас есть прочный фундамент, на котором вы можете строить свои потрясающие приложения. Однако не останавливайтесь на достигнутом, загляните в React Native Docs для получения исчерпывающей информации о каждой функции React Native
Не забудьте прочитать наше руководство по лучшим учебникам по React, чтобы получить некоторую справочную информацию, а если вы любите создавать игры, почему бы не взглянуть на то, как написать мобильную игру с помощью Buildbox?
Комментировать