Saudações.
Acontece que nos últimos anos tenho me envolvido com desenvolvimento web, no entanto, recentemente surgiu a oportunidade e o desejo de me experimentar no desenvolvimento de dispositivos móveis. As razões para isso foram várias, desde o entendimento de que os desktops estão desempenhando um papel cada vez menor, e essa tendência continua, até o desejo trivial de tentar algo novo. Além disso, havia algumas idéias de ret-projetos que assumiam o uso das capacidades das plataformas móveis. Como foi e o que resultou - sob o corte.
Introdução
Tendo em vista que, no momento da transição planejada para o desenvolvimento móvel, as principais ferramentas de desenvolvimento para mim eram o ReactJS, decidi começar por ele. Além disso, usei a plataforma de construção de aplicativos Expo, que resolveu uma parte significativa dos problemas de configuração - a construção do aplicativo foi realizada literalmente em alguns comandos.
O primeiro aplicativo relativamente sério (pelo menos funcionando, e não mostrando o desempenho do QuickStart) para mim foi uma calculadora - quase o mesmo que em cada um dos smartphones. A calculadora deveria conter uma tela, que tem 2 seções - display e teclado, o display - exibe informações e o teclado permite que você as insira.
As capturas de tela do aplicativo resultante estão localizadas sob o spoiler. Eu admito, não parece uma obra-prima de design, mas não muito pior do que a calculadora embutida. Isso não é de interesse aqui
Spoiler
A versão online do emulador é usada para lançar, mas em vários dispositivos domésticos com Android, bem como na versão do navegador do Expo, parece quase o mesmo.
Análise de código fonte
Para que o aplicativo seja "codificado" ao mínimo, movi todos os botões que deveriam estar no teclado em uma matriz bidimensional separada. Ao mesmo tempo, como o rótulo de cada botão é único, ele também é usado como um id, ou seja, é nele que a função de manipulador está vinculada.
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 , - , - , .
PPS O público-alvo deste artigo não são gurus de desenvolvimento web, mas sim subcontratados como eu.
Códigos-fonte