COVID-19 изменил наш образ жизни с момента начала 2020 года – год, когда некоторые из нас хотят быстро двигаться вперед, как кнопка на этом телевизоре. То, что сказал, что самоизоляция, кажется, лучше всего, что вы можете сделать прямо сейчас, и, таким образом, в изоляции мы самим, мы придумали забавную, простую реагирузу нативную идею приложения.
Приложение все о том, как долго вы находитесь в касантике. Как пользователь, вы вводите дату, когда вы запускаете изоляцию, и приложение будет отображать забавное сообщение, чтобы сказать вам, как далеко вы приходите в карантин «игра».
Это сказал, кроме того, помимо удовольствия, этот учебник собирается показать вам, как использовать последнюю версию SDK 37.x.x. Экспо построить демонстрационное приложение. Итак, вы узнаете:
- Как использовать Экспо шрифт крюк ;
- Как использовать Дата время сортировщик модаль выбрать дату;
- Использовать Moment.js Чтобы преобразовать ввод данных, предоставляемый пользователем, и рассчитайте разницу между текущей датой.
Вот подкрадывается то, что мы намерены построить в этом руководстве:
Вы можете найти полный код для этого руководства по этому поводу Github repo Отказ
Создать новое приложение EXPO
Начните с создания нового приложения EXPO в ваших любимых боковых проектах, в вашей местной среде разработки. Запустите следующую команду из нового окна терминала для создания нового нативного приложения RACT, используя EXPO-CLI Отказ
npx expo-cli init DaVinciOfIsolation
Когда попросили выбрать шаблон, выберите шаблон пустой от Управляемый рабочий процесс .
После этого нажмите Enter и пусть EXPO-CLI Установите зависимости, необходимые для начала этого проекта.
Как только проект инициализировал генерацию, перейдите в каталог проекта из окна терминала и запустите службу Bundler Expo.
expo start
Это запустит приложение EXPO в симуляторе или устройстве вашего выбора, где установлен клиент EXPO. Для получения дополнительной информации о том, как установить клиент EXPO, пожалуйста, посетите Официальная документация Отказ
Как только приложение работает в клиенте EXPO, вы будете приветствовать следующего экрана по умолчанию:
Устанавливаем зависимости NPM, нам нужно будет построить этот проект, выполнив следующую команду:
expo install expo-font @use-expo/font @react-native-community/datetimepicker
Экспо установка Добавляет зависимости с использованием определенной версии, которая совместима с EXPO SDK.
Кроме того, установите следующие пакеты NPM, используя NPM установить или использовать пряжа :
yarn add react-native-modal-datetime-picker moment
С этим мы установили необходимый набор зависимостей NPM. Давайте переместимся дальше и начнем строить приложение.
Как использовать пользовательские шрифты в приложении EXPO
Установите новый шрифт
В этом приложении мы собираемся использовать определенный пользовательский шрифт, который можно бесплатно скачать с Google Fonts - Нажмите START 2P Отказ Это доступно для скачивания здесь Отказ
Чтобы использовать этот шрифт или любой другой пользовательский шрифт, создайте новый каталог, называемый шрифты внутри Активы/ папка. Затем поместите файл шрифта, которые вы только что загрузили. Путь к каталогу шрифтов ./assets/fonts Является ли соглашением, что разработчики EXPO рекомендуют использовать при размещении пользовательских шрифтов в вашем приложении.
После размещения файла внутри вновь созданного каталога структура файла будет выглядеть ниже.
Когда вы загружаете шрифт для использования в нативном приложении EXPO RACT, убедитесь, что вы загружаете либо шрифт в либо .Отф. или .ttf формат. Это два формата, которые работают на всех платформах EXPO, таких как WEB, IOS и Android.
Используйте крючок UseFonts
Использовать любой крючок В реактивном или реакцию нативное приложение необходимо использовать функциональные компоненты. Чтобы настроить новый шрифт, начните, импортируя следующие утверждения.
import React from 'react';
import { View, Text } from 'react-native';
import { useFonts } from '@use-expo/font';
import { AppLoading } from 'expo';
UseFonts Крюк принимает один аргумент в качестве объекта JavaScript и возвращает один список элементов, содержащий значение, рассказывающую вам, загружен ли шрифт или нет. Это устраняет необходимость в большом количестве кода котел, чтобы сделать эту проверку.
После того, как вы импортировали утверждения, создайте новый объект под названием CustomFont Отказ Он будет иметь ключ - имя самого шрифта - и значение этой клавиши - путь к файлу шрифта в Активы/Шрифты/ каталог.
const customFont = {
'Press-Start2p': require('./assets/fonts/PressStart2P-Regular.ttf')
};
Далее, внутри компонента функции определите загружен Переменная от UseFonts крючок и пройти CustomFont объект как его аргумент.
Кроме того, когда шрифт находится в состоянии загрузки или еще не загружено, это хорошая практика для использования Приложение Компонент из Экспо и ничего не визуализации на экране. Как только шрифт загружен, экран будет отображаться содержимое функционального компонента.
Вот полный код Приложение компонент. Прямо сейчас мы отображаем название приложения, используя новый шрифт, который мы только что установили.
export default function App() {
const [isLoaded] = useFonts(customFont);
if (!isLoaded) {
return
{`Are You a Quarantine Pro?`}
);
}
С вышеуказанного фрагмента, убедитесь, что вы описываете fontfamily Недвижимость на Текст компонент. Это единственный способ, которым шрифт будет использоваться для определенного текстового компонента.
Вернитесь к клиенту EXPO, и вы увидите следующий результат.
Вот и все! Вы завершили первый шаг загрузки шрифтов и используя их в реактивный приложение. Благодаря Cedric Van Putten Кто сделал процесс погрузки и сопоставления шрифтов легче для нас. Для получения дополнительной информации проверьте коллекцию Cedric из крючков, которые вы можете использовать в приложении EXPO здесь Отказ
Создайте кнопку, чтобы использовать модаль Pictime PicTime
Поскольку мы уже установили необходимые зависимости NPM, чтобы показать модаль отбора даты (что использует модуль собора родных дат), давайте добавим кнопку на текущий App.js файл для отображения этого модала.
Начните с модификации операторов импорта, как указано ниже, и добавьте новые.
import React, { useState } from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
TouchableWithoutFeedback
} from 'react-native';
import {
Fontisto,
MaterialCommunityIcons,
FontAwesome
} from '@expo/vector-icons';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
Чтобы установить ширину и высоту кнопки, мы собираемся использовать Размеры API из реагировать - родной основной. Ширина и высота кнопки будут рассчитаны на основе ширины текущего окна.
Определите переменную W Это будет представлять ширину окна до Приложение Функциональный компонент.
const W = Dimensions.get('window').width;
Далее, после титульного текста приложения, определите другой контейнер Вид Компонент для кнопки. Мы собираемся обернуть содержимое TakeablewithoutFeedbackback кнопка внутри отдельной Вид Компонент, поскольку этот трогательный компонент из реактивных средств разрешается иметь только дочерний компонент. Однако у нас будет два дочерних компонента: значок кнопки и текст. Изменить оператор возврата Приложение Компонент согласно фрагменту кода ниже.
return (); {`Are You a Quarantine Pro?`} {`Tap here to\nselect a date`}
Добавьте следующие стили для приведенного выше фрагмента кода. Давайте воспользуемся Stylesheet Объект для управления стилями в текущем компонентном файле.
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#ffbd12'
},
title: {
fontFamily: 'Press-Start2p',
fontSize: 24,
marginTop: 80,
paddingHorizontal: 20,
lineHeight: 30
},
pickerContainer: {
marginTop: 20,
backgroundColor: '#00c6ae',
width: W / 1.2,
height: W / 4,
borderRadius: 10,
borderWidth: 1,
borderColor: '#000',
borderBottomWidth: 5,
borderBottomColor: '#000',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
pickerText: {
fontFamily: 'Press-Start2p',
fontSize: 14,
paddingHorizontal: 10,
lineHeight: 20
},
icon: {
color: '#000'
}
});
Обновите клиент Экспо, чтобы получить следующий результат.
Теперь, давайте связываем модаль отбора даты к этой кнопке. Мы уже импортировали пакет NPM React - Nature-Modal-DateTime-Picker Нам нужно для этого шага. Мы используем эту библиотеку по умолчанию @ Реагистрационное сообщество/React-National-dateTimePicker Поскольку эта специальная библиотека выставляет кроссплатформенный интерфейс для отображения собственного собора даты и собора времени внутри модала.
Для нашего приложения мы также собираемся оценить количество дней, которые пользователь уже потратил на карантин на основе даты, которую они выбирают в качестве ввода. Давайте определим несколько государственных переменных, используя Уместите Крюк от реагирования по следующим причинам:
выключенхранить дату, выбранную пользователем;IsdatePickervisibleЧтобы показать или скрыть модаль отбора даты.
Мы должны определить три функции помощника наряду с этими переменными состояния. Первые два будут обрабатывать видимость модального модального собора даты. Третий будет обрабатывать кнопку подтверждения с модального модального отбора даты - как к каким действиям, когда пользователь должен выбрать дату. Действие, которое мы должны взять здесь, состоит в том, чтобы скрыть модаль отбора даты, а также хранить значение даты в переменной состояния выключен Отказ
export default function App() {
// ... rest of the component remains same
const [pickedDate, setPickedDate] = useState(null);
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
function showDatePicker() {
setDatePickerVisibility(true);
}
function hideDatePicker() {
setDatePickerVisibility(false);
}
function handleConfirm(date) {
console.log('A date has been picked: ', date);
hideDatePicker();
setPickedDate(date);
}
return (
{`Are You a Quarantine Pro?`}
{`Tap here to\nselect a date`}
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date",.
onConfirm={handleConfirm}
onCancel={hideDatePicker}
headerTextIOS="When did you start isolating?"
/>
}
Чтение данных
ShowDatePicker Метод будет срабатывать каждый раз, когда пользователь нажал кнопку кнопки, чтобы отобразить модаль Picker. Компонент будет только на экране устройства, когда этот метод триггеры.
Когда пользователь подрывает в любом месте за пределами модальных или кранов на Отмена Кнопка, модаль снова скрывается, и ничего не происходит.
Тем не менее, когда выбрана дата, и пользовательские краны Подтвердите дальнейшие действия могут быть приняты. На данный момент давайте покажем дату, выбранную пользователем в консоли.
Вывод показан на сервере EXPO, который работает в окне терминала.
Это означает, что пользовательский ввод теперь сохраняется в переменной состояния выключен Отказ
Кроме того, вы можете применить другие реквирифы в @ Реагистрационное сообщество/React-National-dateTimePicker Отказ В модальном модальном схеме мы реализуем, есть небольшая настройка, используя опоры headertextios. . Это опора позволяет изменять заголовок модального соискателя для устройств iOS.
Оценить «балл карантина»
Вторая недостающая часть головоломки в нашем текущем приложении должна иметь кнопку для расчета разницы дня (ы) между входом пользователя и текущей датой (мы будем использовать это как наш «балл карантина»).
Мы собираемся следовать той же стратегии дизайна, что и в предыдущем разделе. Показать кнопку, которую пользователи могут нажать, чтобы увидеть их оценку.
Начните, импортируя момент Библиотека в App.js Файл после остальных отчетных операторов. Он собирается обрабатывать расчет между входом пользователя и текущей датой.
// rest of the import statements import moment from 'moment';
Эта библиотека также собирается помочь нам отформатировать вход с модального модального собора даты и отображать только дату (а не время) от ввода пользователя в формате Yyyy-mm-dd Отказ
Измените оператор возврата, добавив новый Вид Контейнер, который состоит из текстового сообщения и кнопки для расчета разницы между днями.
Кроме того, до модификации вернуть Заявление функционального компонента, добавить помощник метода под названием ReameRemaining () Это собирается рассчитать разницу. Мы собираемся сохранить эту разницу в государственной переменной под названием дни . Эта переменная состояния будет использоваться в следующем разделе, чтобы отобразить правильный результат на экране.
Разница будет рассчитана между выключен (который является введением пользователя) и сегодняsdate (который является текущей датой).
export default function App() {
const [days, setDays] = useState('');
function daysRemaining() {
// user's input
let eventdate = moment(pickedDate);
// getting current date
let todaysdate = moment();
let remainingDays = todaysdate.diff(eventdate, 'days');
setDays(remainingDays);
return remainingDays;
}
return (
{`Are You a Quarantine Pro?`}
{`Tap here to\nselect a date`}
You started isolating on{' '}
{pickedDate && (
{moment(pickedDate).format('YYYY-MM-DD')}.
)}
Check your level
}
Выбранная дата отображается в желаемом формате, используя момент (). Формат () Функции. выключен Покажем только после того, как пользователь предоставит ввод, выбрав дату с модального модального собора даты.
Вот соответствующие стили для вышеуказанного фрагмента.
const styles = StyleSheet.create({
// rest of the styles remain same
showDateContainer: {
marginTop: 20,
backgroundColor: '#F95A2C',
width: W / 1.2,
height: W / 2,
borderRadius: 10,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
},
showDateText: {
fontFamily: 'Press-Start2p',
fontSize: 14,
padding: 10,
marginTop: 20,
lineHeight: 20
},
evaluateButtonContainer: {
marginTop: 20,
backgroundColor: '#1947E5',
width: W / 1.4,
height: W / 6,
borderRadius: 10,
borderWidth: 1,
borderColor: '#000',
borderBottomWidth: 5,
borderBottomColor: '#000',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
evaluateButtonText: {
color: '#fff',
fontFamily: 'Press-Start2p',
fontSize: 14,
paddingHorizontal: 10,
lineHeight: 20
},
}
Вот начальный результат, который вы собираетесь получить в клиенте EXPO.
Выберите дату из модального модала. После того, как дата была выбрана, она будет показана ниже.
Рендеринг «уровень карантина»
Последнее изображение этого текущего приложения – отобразить результат, когда пользователь нажимает кнопку, которая говорит, что Проверьте свой уровень Отказ
Изменить оператор возврата Приложение компонент. Когда результат доступен, мы собираемся показать уровень карантина пользователя - – но, когда он недоступен, эта коробка ui будет отображать сообщение по умолчанию. Сразу после фрагмента предыдущего раздела добавьте еще один Вид Контейнерный компонент.
Когда оценка сделана, рендерирование () Собирается вернуть только значок и текстовое сообщение, основанное на оценке (разница между текущей датой и датой ввода пользователя). Так как мы используем государственную переменную под названием дни Чтобы сохранить эту разницу, становится легко условно сделать сообщение.
export default function App() {
// rest of the code remains the same
function renderAchievements() {
if (days > 1 && days < 5) {
return (
<>
Quarantine Noob. Don't forget to wear a mask. Keep self-isolating.
);
} else if (days >= 5 && days <= 7) {
return (
<>
Quarantine Connoisseur. Welcome to the (literal) dark side!
);
} else if (days >= 8 && days <= 15) {
return (
<>
Quarantine Proficient. AKA "What is pants?"
);
} else if (days >= 16 && days <= 22) {
return (
<>
Quarantine Veteran. #StayHome became your life motto.
);
} else if (days >= 23) {
return (
<>
THE ULTIMATE QUARANTINE PRO! You are part of the solution - thank you!
);
} else
return (
Your level will be shown here.
);
}
return (
{`Are You a Quarantine Pro?`}
{`Tap here to\nselect a date`}
You started isolating on{' '}
{pickedDate && (
{moment(pickedDate).format('YYYY-MM-DD')}.
)}
Check your level
{/* ADD BELOW */}
{renderAchievements()}
}
Вот стили для рендерирование () Отказ
const styles = StyleSheet.create({
// rest of the styles remain same
resultContainer: {
marginTop: 20,
backgroundColor: '#FF89BB',
width: W / 1.2,
height: W / 2,
borderRadius: 10,
borderWidth: 1,
borderColor: '#000',
justifyContent: 'center',
alignItems: 'center'
},
resultText: {
color: '#fff',
fontFamily: 'Press-Start2p',
fontSize: 16,
padding: 15,
lineHeight: 20
}
});
Теперь вернитесь к клиенту EXPO, и вы будете приветствовать наше окончательное приложение! Попробуйте запустить приложение и выберите разные даты, чтобы увидеть разные результаты, как показано ниже.
Заключение
Мы надеемся, что вы веселились, создали это приложение и обучение. Основными целями этого учебника являются завершены сейчас и подведены к лучшему пониманию, как показано ниже.
- Как использовать Экспо шрифт крюк ;
- Как использовать DateTime Picker Modal выбрать дату;
- Использовать Moment.js Чтобы преобразовать вход с даты, предоставляемой пользователем, и рассчитать разницу между текущей датой («балл карантина»).
Проверьте @ React – Nature-Community/DateTimePicker Для получения дополнительной информации о том, как настроить модаль отбора даты или попробуйте использовать соперник времени. Библиотека Moment.js полна функций, которые помогут вам управлять датой и временем в приложениях JavaScript (еще один учебник здесь ).
Приложение доступно в EXPO здесь , вам просто нужно сканировать QR-код с помощью клиентского приложения EXPO ( iOS | Android ) на вашем устройстве.
Итак, какой балл вы получили? Не стесняйтесь твитнуть нам скриншот @Jscrambler - Мы собираемся отправить футболку Jscrambler в один счастливый самодивеничный dev!
Оригинал: “https://dev.to/jscrambler/creating-quarantine-pro-a-fun-learning-experiment-in-react-native-45”