Salutations.
Il se trouve que ces dernières années, je me suis engagé dans le développement Web, cependant, récemment, il y a eu une opportunité et un désir de m'essayer au développement d'appareils mobiles. Il y avait plusieurs raisons à cela, allant de la compréhension que les ordinateurs de bureau jouent un rôle de moins en moins important, et cette tendance se poursuit, au désir insignifiant d'essayer quelque chose de nouveau. En outre, il y avait quelques idées de ret-projets qui supposaient l'utilisation des capacités des plates-formes mobiles. Comment c'était et ce qui en est sorti - sous la coupe.
introduction
Compte tenu du fait qu'au moment de la transition prévue vers le développement mobile, les principaux outils de développement pour moi étaient ReactJS, il a été décidé de commencer par lui. De plus, j'ai utilisé la plate-forme de création d'applications Expo, qui a résolu une partie importante des problèmes de configuration - la construction de l'application a été réalisée en quelques commandes.
La première application relativement sérieuse (au moins fonctionnant, et ne montrant pas les performances de QuickStart) pour moi était une calculatrice - à peu près la même que dans chacun des smartphones. La calculatrice était censée contenir un écran, qui a 2 sections - affichage et clavier, l'affichage - affiche des informations, et le clavier vous permet de les saisir.
Des captures d'écran de l'application résultante sont situées sous le spoiler. J'admets que cela ne ressemble pas à un chef-d'œuvre du design, mais pas bien pire que la calculatrice intégrée. Cela n'a pas d'intérêt ici
Divulgacher
La version en ligne de l'émulateur est utilisée pour le lancement, mais sur plusieurs appareils domestiques avec Android, ainsi que dans la version navigateur d'Expo, cela ressemble à peu près au même.
Analyse du code source
Pour que l'application soit "codée en dur" au minimum, j'ai déplacé tous les boutons qui devraient être sur le clavier dans un tableau bidimensionnel séparé. Dans le même temps, puisque l'étiquette de chaque bouton est unique, elle est également utilisée comme identifiant, c'est-à-dire c'est sur cela que la fonction handler est liée.
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 Le public cible de cet article n'est pas des gourous du développement web, mais plutôt des sous-traitants comme moi.
Codes source