Schöne Grüße.
So kam es, dass ich in den letzten Jahren in der Webentwicklung tätig war. In letzter Zeit gab es jedoch die Gelegenheit und den Wunsch, mich in der Entwicklung für mobile Geräte zu versuchen. Dafür gab es mehrere Gründe, angefangen vom Verständnis, dass Desktops eine immer geringere Rolle spielen, und dieser Trend setzt sich fort, bis hin zum trivialen Wunsch, etwas Neues auszuprobieren. Außerdem gab es einige Ideen für Ret-Projekte, bei denen die Funktionen mobiler Plattformen genutzt wurden. Wie es war und was daraus wurde - unter dem Schnitt.
Einführung
Angesichts der Tatsache, dass ReactJS zum Zeitpunkt des geplanten Übergangs zur mobilen Entwicklung das wichtigste Entwicklungswerkzeug für mich war, wurde beschlossen, damit zu beginnen. Außerdem habe ich die Expo-Plattform zum Erstellen von Anwendungen verwendet, mit der ein erheblicher Teil der Konfigurationsprobleme gelöst wurde. Das Erstellen der Anwendung wurde buchstäblich in wenigen Befehlen ausgeführt.
Die erste relativ ernsthafte Anwendung (die zumindest funktioniert und die Leistung von QuickStart nicht zeigt) war für mich ein Taschenrechner - ungefähr so wie bei jedem Smartphone. Der Taschenrechner sollte einen Bildschirm enthalten, der aus zwei Abschnitten besteht: Anzeige und Tastatur, Anzeige - Informationen anzeigen und über die Tastatur eingeben können.
Screenshots der resultierenden Anwendung befinden sich unter dem Spoiler. Ich gebe zu, es sieht nicht wie ein Design-Meisterwerk aus, aber nicht viel schlimmer als der eingebaute Taschenrechner. Dies ist hier nicht von Interesse
Spoiler
Die Online-Version des Emulators wird zum Starten verwendet, aber auf mehreren Heimgeräten mit Android sowie in der Browserversion von Expo sieht sie ungefähr gleich aus.
Quellcode-Analyse
Damit die Anwendung auf ein Minimum "fest codiert" werden kann, habe ich alle Tasten, die sich auf der Tastatur befinden sollten, in ein separates zweidimensionales Array verschoben. Da das Etikett auf jeder Schaltfläche eindeutig ist, wird es gleichzeitig auch als ID verwendet, d. H. Daran ist die Handlerfunktion gebunden.
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 Die Zielgruppe dieses Artikels sind keine Webentwicklungsgurus, sondern Subunternehmer wie ich.
Quellcodes