Salam pembuka.
Kebetulan selama beberapa tahun terakhir saya telah terlibat dalam pengembangan web, namun belakangan ini ada kesempatan dan keinginan untuk mencoba diri saya sendiri dalam pengembangan untuk perangkat seluler. Ada beberapa alasan untuk ini, mulai dari pemahaman bahwa desktop memainkan peran yang terus menurun, dan tren ini terus berlanjut, hingga keinginan sepele untuk mencoba sesuatu yang baru. Selain itu, ada beberapa gagasan untuk proyek ulang yang mengasumsikan penggunaan kemampuan platform seluler. Bagaimana itu dan apa yang terjadi - di bawah luka.
pengantar
Mengingat fakta bahwa pada saat transisi yang direncanakan ke pengembangan seluler, alat pengembangan utama bagi saya adalah ReactJS, diputuskan untuk memulainya. Selain itu, saya menggunakan platform pembuatan aplikasi Expo, yang memecahkan sebagian besar masalah konfigurasi - membangun aplikasi dilakukan dalam beberapa perintah.
Aplikasi pertama yang relatif serius (setidaknya berfungsi, dan tidak menunjukkan kinerja QuickStart) bagi saya adalah kalkulator - hampir sama dengan yang ada di masing-masing smartphone. Kalkulator seharusnya berisi satu layar, yang memiliki 2 bagian - tampilan dan keyboard, tampilan - menampilkan informasi, dan keyboard memungkinkan Anda untuk memasukkannya.
Tangkapan layar dari aplikasi yang dihasilkan terletak di bawah spoiler. Saya akui, ini tidak terlihat seperti mahakarya desain, tetapi tidak jauh lebih buruk daripada kalkulator bawaan. Ini tidak menarik di sini
Spoiler
Versi online emulator digunakan untuk meluncurkan, tetapi di beberapa perangkat rumah dengan android, serta di versi browser Expo, tampilannya kurang lebih sama.
Analisis kode sumber
Agar aplikasi dapat "di-hardcode" seminimal mungkin, saya memindahkan semua tombol yang seharusnya ada di keyboard ke dalam array dua dimensi yang terpisah. Pada saat yang sama, karena label pada setiap tombol unik, itu juga digunakan sebagai id, mis. di sinilah fungsi handler terikat.
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 Target pembaca artikel ini bukanlah ahli pengembangan web, melainkan subkontraktor seperti saya.
Kode sumber