Русский
Русский
English
Статистика
Реклама

Калькулятор на телефон как способ знакомства с React-native

Приветствую.
Так получилось, что последние несколько лет я занимался веб-разработкой, однако - в последнее время появилась возможность и желание попробовать себя в разработке на мобильные устройства. Причин на то было несколько, начиная от понимания того, что десктопам отводится все меньшая роль, и эта тенденция сохраняется, и заканчивая тривиальным желанием попробовать что либо новое. Кроме ого, была пара задумок для рet-проектов, которые предполагали использование возможностей мобильных платформ. Как это было и что из этого вышло - под катом

<cut />

Введение

Ввиду того, что на момент планированного перехода в мобильную разработку основным инструментов разработки для меня являлся ReactJS, было принято решение начать именно с него. Кроме того, мною была использована платформа для сборки приложений Expo, которая решила существенную часть проблем с конфигурацией - сборка приложения осуществлялась буквально за несколько команд.
Первым относительно серьезным(по крайней мере, работающим, а не показывающим работоспособность QuickStart`a) приложением для меня стал калькулятор - примерно такой же, как есть в каждом из смартфонов. Калькулятор должен был содержать один экран, в котором есть 2 раздела - дисплей и клавиатура, дисплей - отображает информацию, а клавиатура позволяет ее вводить
Скриншоты получившегося приложения расположены под спойлером. Признаю, выглядит не как шедевр дизайна, но - не сильно хуже встроенного калькулятора. Интерес тут представляет не это

Spoiler
Горизонтальное отображениеГоризонтальное отображениеВертикальное отображениеВертикальное отображение

Для запуска используется онлайн-версия эмулятора, но на нескольких домашних устройствах с андроидом, а так же - в браузерной версии Экспо оно выглядит приблизительно также.

Анализ исходного кода

Для того, что бы приложение было по минимуму "захардкодженным" я вынес все кнопки, которые должны быть на клавиатуре в отдельный двумерный массив. При этом, ввиду того, что надпись на каждой кнопке уникальна - она же используется и в качестве id, т.е. именно по ней привязывается функция-обработчик.

let labels=[    ["1","2","3"],    ["4","5","6"],    ["7","8","9"],    ["0", ".","+/-"],    ["+","-","*","/"],    ["ln","C", "=",]]

Данный подход позволяет не только изменять расположение клавиш, но еще и - в случае необходимости - получать их с сервера, не меняя логику самого приложения.
Аналогичным образом сделана и привязка операций к кнопкам - при этом надпись на кнопке является ключом, а функция, в моем случае стрелочная - значением. Ввиду объемности следующего объекта - уберу его под спойлер. Для взаимосвязи использовались хуки состояний - об этом упомяну чуть позже.

Spoiler
let functionMapping = {        "+":()=>{            setOperation(()=>(a,b)=>{return a+b})            setFirstOperand(display);            setDisplay("")        },        "-":()=>{            setOperation(()=>(a,b)=>{return a-b})            setFirstOperand(display);            setDisplay("")        },        "*":()=>{            setOperation(()=>(a,b)=>{return a*b});            setFirstOperand(display);            setDisplay("")        },        "/":()=>{            setOperation(()=>(a,b)=>{return a/b});            setFirstOperand(display);            setDisplay("");        },        "ln":()=>{            setOperation(()=>(a,b)=>{return Math.log(a)});            setFirstOperand(display);        },        "C":()=>{            setFirstOperand("");            setsecondOperand("");            setOperation(null);            setDisplay("");        },        "+/-":()=>{            setDisplay((+display)*(-1)+"");        },        ".":()=>{            if (display.indexOf(".")===-1)                setDisplay(display+".")        },        "=":()=>{            setsecondOperand(display);            let rezult = operation(+firstOperand, +display);            setDisplay(rezult);        }    }    for (let i =0; i<10; i++) {        functionMapping[i+""]=()=>{setDisplay(display+i)};    }

Тут особого внимания заслуживают конструкции вида

setOperation(()=>(a,b)=>{return a * b})


Выглядит крайне нелогично, кроме того - ошибка, которая выбрасывается при использовании интуитивного

setOperation(()=>{return ab})

весьма посредственно гуглится.
Однако, в статье рассматривается данная проблема - не только ее решение, но и причины, почему это было сделано именно так.
Кроме того, для числовых значений кнопок функция-хэндлер однотипна, поэтому добавление ее обработчиков вынесено в отдельный цикл.

В моем проекте используются функциональные компоненты, поэтому вместо громоздких выражений с конструкторами для хранения требуемой информации используются 4 переменных состояния, одна из которых к тому же не момент релиза не используется (однако умышленно оставлена, ввиду планов на дальнейшее развитие)

    const [operation, setOperation] = useState(null);    const [firstOperand, setFirstOperand] = useState("");    const [secondOperand, setsecondOperand] = useState("");    const [display, setDisplay] = useState("");

Соответственно, firstOperand и secondOperand хранят значения переменных, display отвечает за информацию, выводимую на экран, а operation хранит ключ выбранной операции.
На этом вся логика приложения закончилась, все что происходит дальше - лишь отображение компонентов и прикрепление таблицы стилей
Прикреплю это под спойлер, кроме того, в конце статьи будет ссылка на репозиторий со всеми исходниками.

Spoiler

Отображение компонентов

<View style={styles.root}>      <View style = {styles.display}>          <Text style={{fontSize: 40}}>              {display}          </Text>      </View>        <View style={styles.keyboard}>        {labels.map((value, index, array)=>{          return <View style={styles.row}>              {value.map((item)=>{                  return <TouchableOpacity style={styles.cell} onPress={()=>{functionMapping[item]()}}>                      <Text style={{fontSize: 35}}>{item}</Text>                  </TouchableOpacity>              })}          </View>        })}      </View>    </View>

Стили

const styles = StyleSheet.create({  root: {      flex: 1,      backgroundColor: '#fff',      alignItems: 'center',      justifyContent: 'center',      fontSize:40  },  display:{      flex: 2,      backgroundColor: "lightblue",      width: "100%",      justifyContent: "space-around",      alignItems: "center"  },  keyboard:{      flex: 9,      width: "100%",      backgroundColor:"lightgrey",      justifyContent:"space-around",      alignItems:"center"  },  row:{      flex: 1,      flexDirection:"row",      justifyContent:"space-around",      alignItems:"center",      width:"100%",  },  cell:{      flex:1,      borderWidth:1,      width:"100%",      height:"100%",      justifyContent:"space-around",      alignItems:"center",    }});

Процесс написания и отладки-ощущения

Приложение создавалось мною с помощью Expo quickstart. Она создает базовое приложение, имеющее все основные разделы и базовый файл App.js, который предполагается изменять для получения желаемого результата. Проблем с конфигурацией практически нет - в этом большой плюс, т.к. попытки разобраться с созданием мобильных приложений на Java разбивались в том числе и о сложности конфигурации (это была не единственная причина, но с конфигами Джавы у меня исторически сложились напряженные отношения). Любое изменение практически сразу же можно увидеть на web-сервере, запускаемым Expo, либо - в эмуляторе.
Однако тут есть несколько проблем. Большую часть времени я отлаживал приложение в браузере, запуская эмулятор андроида только перед тем как отправить на сборку релизной версии. И - возникла очень не очевидная проблема, когда один и тот же код корректно работал на веб-версии и напрочь вылетал на андроиде, не оставляя никаких логов. Методом последовательного исключения компонентов было выявлено, что проблема в компоненте Picker, который ожидал получить в качестве называния строку, а получал - число. (данный элемент не попал в релизную версию программы, но не отметить я это не мог). Кроме того, в веб-версии шрифты можно было изменять с помощью поля строкового типа, задавая ему габариты в условно любых единицах - процентах, пикселях или даже архаичных "сантиметрах", в то время как на андроиде программа требовала дать ей только число.
Очень не порадовало отсутствие по умолчанию наследования свойств - нельзя было задать шрифт и выравнивание для корневого элемента, полагая, что все его потомки будут его поддерживать.
С другой стороны - очень к месту приходится возможность flex разметки, которая в вебе появилась сравнительно недавно - именно с ее помощью получается получать довольно аккуратную верстку даже на довольно экстремальных соотношениях сторон. С помощью "классического" CSS, безусловно, можно сделать то же самое, но это потребует на порядок более кропотливой работы.
Ну и безусловно - размер сборки получается слишком весомый. Я понимаю, что это плата за простоту написания, и на чем-либо уровня С, размер приложения будет существенно меньше, но тем не менее...

Выводы

В целом, учитывая опыт верстки на чистом Реакте, освоение основных принципов React-native заняло очень небольшое количество времени. Инструмент содержит в себе основные преимущества Реакта, однако - не клонирует его полностью, внося ряд ограничений и добавляя новые возможности. В некотором роде можно сказать, что нативный Реакт более требователен к типам, чем обычный, но если сравнивать его с React over TypeScript - различий становится еще меньше. Как мне кажется, можно сказать, что react-native может стать неплохой точкой входа в индустрию разработки мобильных приложений для лиц, имеющих опыт в вебе.

P.S. Cтатья не претендует на рассмотрение как авторитетное мнение о технологии, она лишь описывает - надеюсь, объективно - первое впечатление от инструмента от человека, имеющего опыт в смежной области
P.P.S Целевая аудитория статьи - не гуру веб разработки, а скорее смежники, подобные мне.

Исходники

Источник: habr.com
К списку статей
Опубликовано: 17.01.2021 22:08:31
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Reactjs

React-native

Мобильная разработка

Калькулятор

Pet-project

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru