Saludos.
Sucedió que durante los últimos años me he dedicado al desarrollo web, sin embargo, recientemente ha habido una oportunidad y deseo de probarme a mí mismo en el desarrollo para dispositivos móviles. Había varias razones para esto, que iban desde la comprensión de que las computadoras de escritorio están jugando un papel cada vez más pequeño, y esta tendencia continúa, hasta el deseo trivial de probar algo nuevo. Además, hubo un par de ideas para proyectos ret que asumían el uso de las capacidades de las plataformas móviles. Cómo fue y qué salió de él, debajo del corte.
Introducción
Debido al hecho de que en el momento de la transición planificada al desarrollo móvil, las principales herramientas de desarrollo para mí eran ReactJS, se decidió comenzar con él. Además, utilicé la plataforma de creación de aplicaciones Expo, que resolvió una parte importante de los problemas de configuración: la creación de la aplicación se llevó a cabo literalmente en unos pocos comandos.
La primera aplicación relativamente seria (al menos en funcionamiento y sin mostrar el rendimiento de QuickStart) para mí fue una calculadora, más o menos la misma que en cada uno de los teléfonos inteligentes. Se suponía que la calculadora contenía una pantalla, que tiene 2 secciones: pantalla y teclado, la pantalla muestra información y el teclado le permite ingresarla.
Las capturas de pantalla de la aplicación resultante se encuentran debajo del spoiler. Lo admito, no parece una obra maestra del diseño, pero no es mucho peor que la calculadora incorporada. Esto no es de interés aquí
Revelación
La versión en línea del emulador se usa para iniciar, pero en varios dispositivos domésticos con Android, así como en la versión del navegador de Expo, se ve aproximadamente igual.
Análisis de código fuente
Para que la aplicación esté "codificada" al mínimo, moví todos los botones que deberían estar en el teclado a una matriz bidimensional separada. Al mismo tiempo, dado que la etiqueta de cada botón es única, también se utiliza como identificación, es decir, es sobre esto que está ligada la función de manejador.
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 El público objetivo de este artículo no son los gurús del desarrollo web, sino subcontratistas como yo.
Códigos fuente