Калькулятор на телефон как способ знакомства с 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 Целевая аудитория статьи – не гуру веб разработки, а скорее смежники, подобные мне.
Исходники
