Базовая сборка React Native

Для того чтобы собрать стартовый вариант для разработки в React Native, можно сделать следующее:

Сначала необходимо установить node.js с сайта nodejs dot org. Установка стандартная, не должна вызвать сложностей.

Затем необходимо установить Expo CLI, это можно сделать с помощью команды:

npm install -g expo-cli

Далее переходим в папку, в которой будем создавать проект:

И вводим команду:

expo init

Появится выбор вариантов инициализации:

Можно выбрать несколько вариантов установки, выбираем первый.

Далее нужно заполнить две строки: имя проекта (name) и название папки проекта (slug)

С помощью кнопок вверх вниз можно переключаться между строчками name и slug.

Нажимаем Enter, начинается установка проекта.

После установки, появится новая папка folderformyproject (или другая, в зависимости от того, что Вы указали в поле slug), для перехода в эту папку вводим команду:

cd folderformyproject

и дальше для запуска проекта можно ввести команду:

npm start

или

expo start

На выбор, как Вам нравится.

Автоматически откроется вкладка:

В логах мы видим информационное сообщение — Tunnel ready.

Т.е. тоннель готов к использованию. Дальше нужно переключиться на использование тоннеля:

Следующий этап, настройка приложения на смартфоне.

Для просмотра создаваемого приложения, можно использовать сотовый телефон, подключенный к компьютеру через USB.

На телефоне должно быть установлено приложение Expo, его можно скачать через Play Market. В приложении Expo необходимо пройти автризацию (в разделе profile) и переключиться на вкладку Project.

Во вкладке Project есть раздел инструменты (tools), выбираем пункт «Scan QR Code» и сканируем код на нашей странице:

Через некоторое время, в логах, Вы увидите информационное сообщение «Building JavaScript bundle: finished» а на экране смартфона сообщение: «Open up App.js to start working on your app!»

Ну и для того что бы почувствовать себя настоящим разработчиком (шутка), давайте перейдем в файл App.js все в нем сотрем и добавим вот такой код:

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

export default class ButtonBasics extends Component {
  _onPressButton() {
    alert('I know, I will be the best developer in the world!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

Пример взят из документации по React Native.

Успехов Вам, в мобильной разработке.

Добавить комментарий Отменить ответ