Хорошо, давайте начнем с вводного слова… 🤓. React-Native - это фреймворк (разработанный Facebook) для написания приложений iOS и Android на языке веб-разработки под названием JavaScript, который преобразуется в кроссплатформенное собственное приложение для iOS и Android. Преимущество этого заключается в том, что вы можете использовать язык веб-разработки, к которому вы привыкли, и должны изучать и поддерживать только один язык (JavaScript).
Это то, что мы собираемся использовать для создания действительно простого приложения To Do. Мы собираемся использовать Expo, чтобы избавиться от хлопот с настройкой проекта и быстро создать прототип. Для производственных приложений вам следует заглянуть в React-Native CLI.
Требования
- Аккаунт на https://snack.expo.io
- Загрузите приложение Expo в Apple Store или Play Store
- Устройство Android или iPhone
Начиная
Авторизуйтесь на https://snack.expo.io и создайте новую закуску. Это даст вам пример проекта, как показано ниже.
Нажмите «Запустить на вашем устройстве» в эмуляторе справа. Это даст вам модальное окно с запросом идентификатора вашего устройства. Он находится в приложении Expo на вкладке «Проекты» (которую вы уже должны были загрузить) на вашем устройстве Android / iPhone.
Если вы ввели идентификатор устройства и нажали «Сохранить», должно появиться зеленое сообщение о том, что ваше устройство подключено. Вы можете найти проект в разделе «Недавно в разработке» на вкладке «Проекты».
Откройте проект на своем телефоне, каждое изменение, которое вы делаете в браузере, должно отражаться на вашем устройстве.
Создание заголовка
Хорошо, давайте начнем с написания наших первых строк кода. Очистите файл App.js, как показано ниже, чтобы в нашем приложении был чистый лист и белый экран.
Теперь давайте начнем добавлять цвет на нашу страницу и изменим цвет текста в строке состояния на белый. Введите следующий код, убедитесь, что вы импортировали «StatusBar» и «LinearGradient».
Компонент «LinearGradient» дает эффект градиентного фона. Компонент «StatusBar» придает вышеуказанной полосе белый цвет текста. Ваш экран сейчас должен выглядеть так. Также обратите внимание на «style = {{flex: 1}}», это гарантирует, что LinearGradient растянут на полную ширину и высоту.
Хорошо, выглядит немного лучше, но дел пока нет. Давайте посмотрим на это дальше.
Создайте текстовый ввод для добавления новых дел
Чтобы добавить новые элементы To Do, должна быть область, где люди могут вводить заголовок нового элемента To Do. Итак, давайте начнем с компонента TextInput.
Обратите внимание, что мы импортировали TextInput вверху и добавили его. Также мы добавили несколько стилей в TextInput внизу. Если вы посмотрите на TextInput, есть много доступных опций (эти опции называются props в react native). Вы можете прочитать здесь, чтобы получить объяснение о них: https://facebook.github.io/react-native/docs/textinput.html#props.
Ввод текста пока не выполняется, но ваше приложение должно выглядеть так, как показано ниже (я знаю, что оно действительно большое).
Построение логики.
Эта часть, возможно, самая сложная. Но это оживит ваше приложение :). Шаги логики будут такими.
- Текстовый ввод должен иметь пустое значение по умолчанию. (это состояние приложения по умолчанию);
- При вводе значение по умолчанию должно измениться на то, что набрал конечный пользователь (состояние изменяется, когда пользователь печатает);
- При нажатии ввода текущее состояние поля ввода текста должно быть добавлено в список дел, а состояние ввода текста должно быть сброшено до пустого значения по умолчанию;
- При нажатии кнопки удаления за списком дел. Список дел будет удален.
Хорошо, давайте запрограммируем эти шаги.
Сначала у нас должно быть пустое значение по умолчанию для ввода текста.
Обратите внимание, что мы добавили опору value в компонент InputText и используем this.state.inputValue сверху.
Следующее, что нужно сделать, это обновить state.inputValue, когда пользователь печатает. Мы сделаем это с помощью свойства «onChangeText = {this.changeText}». Что вызовет метод onChangeText, этот метод принимает новое значение и устанавливает новое состояние inputValue. Приложение будет выглядеть так же.
Если вы закончили вводить текст и нажали клавишу возврата, мы хотим добавить в список новый элемент To Do. Что мы будем хранить в состоянии, а также в массиве todos. Этот список отображается в компоненте и отображает все элементы To Do.
Если вы посмотрите на приведенный выше код, мы добавили в состояние элемент «todos» (массив). По умолчанию состояние пусто, но именно здесь мы можем хранить новые задачи.
Также мы добавили новую опору в компонент InputText, onSubmitEditing, которая вызывает функцию addItem. Функция добавляет новый элемент в состояние задач.
В функцию рендеринга мы добавили переменные todos. Это отображает все задачи в массиве в текст с кнопкой сбоку для переключения состояния. Эта переменная отображается между View. Приложение должно выглядеть так, как показано ниже. (Я знаю, что стиль может быть лучше 🙃).
Задания
К настоящему времени вы знаете, как добавлять элементы To Do и создавать простое приложение To Do. Если вам нужна дополнительная практика, попробуйте построить следующие вещи самостоятельно.
- Удалить задачу из списка
- Переключить состояние элементов To Do на выполненное (с помощью флажка или зачеркивания)
- Добавьте категории в список дел и отобразите их в списке (работа, отдых и т. Д.)
Или просто придумывайте идеи сами и пытайтесь воплотить их в жизнь.
Если у вас есть идея для мобильного приложения или вам нужна помощь с вашим приложением, просто отправьте мне письмо [email protected] или ответьте на эту историю.
Также, если у вас есть идеи о последующей истории (часть 2) или совершенно другая идея / запрос о том, о чем писать, пожалуйста, дайте мне знать.
