Если у вас более 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:
import
: эти строки в верхней части файла будут импортировать различные компоненты и библиотеки, которые вам понадобятся. По умолчанию следуетimport React
иimport
список компонентов изreact-native
.const
определяет объекты, функции и стили, которые можно использовать в теле вашего приложения. Например, в моем приложении для выбора обеда былоconst Images
в виде массива изображений иconst randomNumber
в качестве функции для вычисления и возврата случайного числа при наличии двух входных данных.export default class ProjectName extends Component
содержит тело вашего приложения.constructor(props) {}
устанавливает начальное состояние любых свойств в приложении.- Определите любые функции в теле приложения, используя синтаксис 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, настоятельно рекомендуем погрузиться в учебные пособия и проверить их самостоятельно.
Особая благодарность Дастину и Дэррику за их вдохновение в этом проекте.