Если у вас более 2 недель опыта работы с React и React Native, этот пост не для вас. Этот пост предназначен для разработчика, у которого была идея веб-приложения и который был убежден превратить веб-приложение в мобильное приложение (с нулевым опытом мобильной разработки), который впоследствии потратил одну неделю на кодирование двух простых мобильных приложений и еще неделю задавался вопросом, почему ее кнопки не работали, пока, наконец, они не сделали!

Задний план

Мы с моим близким другом подробно обсуждали жизненное счастье и карьерные цели, две области, которые всегда кажутся переплетенными для меня и моих сверстников, как будто мы никогда не могли бы быть счастливы в отсутствие высоких достижений в карьере. Добавьте кучу различных карьерных возможностей, и вы получите идеальный шторм для моего кризиса четверти тысячелетия жизни. К счастью для меня, мой друг очень хорошо справляется с шумом, и мы провели умственное упражнение, чтобы помочь найти корень того, что мне нравится делать. В какой-то момент нашего обсуждения он начал задавать дополнительные вопросы в форме «Почему» + мой ответ. После 4 или 5 итераций мы, наконец, пришли к выводу, который устранил мой большой ментальный блок. Поэтому я подумал, почему бы не создать инструмент, который имитирует этот тип умственного упражнения: постоянное повторение вопроса «ПОЧЕМУ», чтобы добраться до сути чего-либо.

Перенесемся на одну неделю вперед, и я разговариваю со своим наставником о том, какой тип проектов по разработке следует реализовать в моем списке из 15+ вариантов. Его совет состоял в том, чтобы создавать вещи, которые я действительно буду использовать; это сузило мои варианты до 2, и этот инструмент для умственных упражнений был одним из них. Мы обсудили возможность использования React Native для создания мобильного приложения. Хотя я слышал о React, у меня не было реального опыта работы с ним. И попытка мобильного вдобавок ко всему? Конечно, я люблю вызов!

Реагировать на родной

Давайте пропустим тот факт, что у меня не было абсолютно никакого опыта работы с React, когда я впервые взялся за это. Я прошел Учебник по React с молниеносной скоростью через Компоненты, Реквизиты, Состояния и рендеринг, а затем последовал учебник React Native. React — это библиотека JavaScript, созданная в первую очередь Facebook для поддержки динамического пользовательского интерфейса без перезагрузки страницы. React Native — это библиотека, расширяющая возможности React для разработки мобильных приложений. Они немного похожи на строительные блоки Lego, гибкие и простые в сборке.

Учебники действительно отлично документируют и проводят вас через все, что было чрезвычайно полезно.

Настраивать

Я следовал этому руководству по установке, используя Создание проектов с собственным кодом в качестве дорожной карты, устанавливая зависимости и Xcode (для Mac). Это позволило мне использовать инструменты командной строки, такие как

react-native init ProjectName

и

cd ProjectName
react-native run-ios

для создания нового приложения React Native и запуска симулятора iPhone соответственно. Я нашел симулятор самой крутой частью этого проекта.

Кодирование

Итак, я использовал базовое приложение React Native в качестве отправной точки и модифицировал код в index.ios.js. Я предполагал иметь текстовое поле для ввода и кнопку «Почему?» чтобы запросить отображаемый ответ, который объединяет «Почему» + ответ, введенный пользователем. Именно здесь я сильно разочаровался в компоненте Button, который является частью стандартной библиотеки; iOS получает что-то, похожее на ссылку, в то время как Android получает правильную кнопку, похожую на кнопку. Искал компоненты кнопки, и я думаю, что установил один, который не работал, потому что я сломал свое приложение (красный экран гнева?). Поскольку приложение было таким крошечным, я решил начать проект с нуля. (Оглядываясь назад, взлом приложения был полностью ошибкой пользователя с моей стороны. Но и эта кнопка так и не сработала.)

В этот момент я подумал о другом проекте, из которого могло бы получиться отличное мобильное приложение; мы с мужем всегда сталкивались с трудностями при выборе того, что есть на ужин, поэтому я создала инструмент JavaScript, чтобы помочь нам выбрать. Это было очень просто: единственная кнопка, по нажатию которой возвращался случайный вариант ужина. Если нам не нравилось то, что выбирало приложение, я продолжал нажимать кнопку, пока мы не находили что-то приемлемое. Пока я пытался выяснить проблему с кнопкой в ​​инструменте умственных упражнений, я решил попробовать перестроить меню выбора обеда для мобильных устройств. На самом деле было не так уж сложно (смею сказать, почти легко?) перестроить приложение, как только я освоил компоненты React. Мне пришлось потратить немного времени, чтобы заставить работать функцию рандомизатора, а также найти изображения для каждой категории блюд. Но все же проблема с Кнопкой поставила меня в тупик! Мне определенно нужна была кнопка, чтобы это приложение запускало функцию chooseDinner(). После дополнительных исследований и экспериментов с кнопкой по умолчанию и вышеупомянутым компонентом, который сломал меня, я остановился на этой простой реализации. У него были варианты стилизации кнопки, похожие на то, к чему я привык с помощью CSS/Bootstrap.

И это сработало!!

Структура базового приложения React Native:

  1. import : эти строки в верхней части файла будут импортировать различные компоненты и библиотеки, которые вам понадобятся. По умолчанию следует import React и import список компонентов из react-native.
  2. const определяет объекты, функции и стили, которые можно использовать в теле вашего приложения. Например, в моем приложении для выбора обеда было const Images в виде массива изображений и const randomNumber в качестве функции для вычисления и возврата случайного числа при наличии двух входных данных.
  3. export default class ProjectName extends Component содержит тело вашего приложения.
  4. constructor(props) {} устанавливает начальное состояние любых свойств в приложении.
  5. Определите любые функции в теле приложения, используя синтаксис ES6. В приведенном ниже фрагменте кода я определяю функцию chooseDinner, которая принимает Images в качестве параметра и меняет состояние, устанавливая index на случайное число в диапазоне чисел.
chooseDinner = (Images) => {
    this.setState({
      index: randomNumber(0, 11),
    })
  }

6. render() {} — это место, где расположены фактические визуальные элементы. Это написано на JSX, синтаксисе для встраивания XML в HTML с использованием компонентов React вместо тегов HTML.

7. Я оставил свой const styles = StyleSheet.create({}) внизу. Здесь вы будете определять стили, связанные с компонентами, очень похоже на CSS.

8. AppRegistry внизу определяет и регистрирует ваше приложение.

Для приложения выбора обеда нужно провести дополнительную оптимизацию (например, более быстрая загрузка изображений), и я все еще обдумываю способы динамического возврата «Почему + ответ пользователя», поскольку я хотел бы, чтобы ответ был грамматически правильным, кажется, что для приложения потребуется больше логики, чтобы распознать, что является грамматически правильным, а что нет. В целом, мне очень понравился процесс возни с React Native и изучение чего-то нового! Если вы никогда раньше не использовали React, но неплохо знакомы с JavaScript, настоятельно рекомендуем погрузиться в учебные пособия и проверить их самостоятельно.

Особая благодарность Дастину и Дэррику за их вдохновение в этом проекте.